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

先上效果图：

工作需要用到这样的效果，网上找到的不尽人意，就自己实现了一下。

<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();
}

思路就是input和select来回切换，把样式调成一样的就行了。