【工作笔记】可自定义下拉选项的选择框

最新推荐文章于 2024-06-07 19:10:57 发布

越来越放肆了

最新推荐文章于 2024-06-07 19:10:57 发布

阅读量397

点赞数

CC 4.0 BY-SA版权

分类专栏： bug猿的自我修养文章标签： js html

本文链接：https://blog.youkuaiyun.com/qq_28298683/article/details/77503201

bug猿的自我修养专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的自定义货币选择器。该选择器包含一个输入框和一个下拉列表，允许用户输入自定义货币或从预设选项中选择。通过两个控件之间的联动，实现了货币信息的灵活输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上效果图：
自定义内容的下拉框
工作需要用到这样的效果，网上找到的不尽人意，就自己实现了一下。

<div>
    <label>货币：</label>
    <div>
        <div id="input_currency">
            <input type="text" name="currency" id="currency" placeholder="请输入货币" onblur="currencyInput(this.value) " autofocus="autofocus" />
        </div>
        <div id="select_currency">
            <select onchange="currencyChange(this.value)" id="money">
            <option value="CNY" selected="selected">人民币(CNY)</option>
            <option value="EUR">欧元(EUR)</option>
            <option value="GBP">英镑(GBP)</option>
            <option value="JPY">日元(JPY)</option>
            <option value="AUD">澳元(AUD)</option>
            <option value="CAD">加元(CAD)</option>
            <option value="CHF">瑞士法郎(CHF)</option>
            <option value="USD">美元(USD)</option>
            <option value="HKD">港元(HKD)</option>
            <option value="SEK">瑞典克朗(SEK)</option>
            <option value="KRW">韩元(KRW)</option>
            <option value="-1">--自定义--</option>
         </select>
         </div>
     </div>
 </div>

两个控件联动代码:

function currencyChange(val) {
    if(val != '-1') return ;

    $('#select_currency').hide();
    $('#input_currency').show();
    $('#currency').val("").focus();
}

function currencyInput(val) {
    //如果什么都没输入则不添加进下拉选项中
    if(val == "" || val == undefined || val == null){
        $('#select_currency').find('option:first').prop('selected', 'selected');
        $('#select_currency').show();
        $('#input_currency').hide();
        return ;
    }

    var row = "<option value='" + val + "' selected='selected'>" + val + "</option>";
    $('#select_currency').find('option:last').before(row);
    $('#select_currency').show();
    $('#input_currency').hide();
}