可编辑下拉框

引用地址：https://www.helloweba.net/javascript/348.html

1、引进第三方库

jquery.editable-select.min.css

jquery.editable-select.min.js

2、例：

做一个可下拉选择颜色，并且可输入rgb颜色

注意：这里由于是RGB颜色，所以在取值的时候，是有问题的，只能取到red颜色，我这边是通过id取值的，

2.1、页面上标签如下

<select id="TitleColor" class="form-control editable-select">
     <option id="192,0,0" value="192,0,0" style="background-color: rgb(192,0,0);"></option>
     <option id="255,0,0" value="255,0,0" style="background-color: rgb(255,0,0);"></option>
     <option id="255,192,0" value="255,192,0" style="background-color: rgb(255,192,0);"></option>
     <option id="255,255,0" value="255,255,0" style="background-color: rgb(255,255,0);"></option>
     <option id="146,208,80" value="146,208,80" style="background-color: rgb(146,208,80);"></option>
     <option id="0,176,80" value="0,176,80" style="background-color: rgb(0,176,80);"></option>
     <option id="0,176,240" value="0,176,240" style="background-color: rgb(0,176,240);"></option>
     <option id="0,112,192" value="0,112,192" style="background-color: rgb(0,112,192);"></option>
    <option id="0,32,96" value="0,32,96" style="background-color: rgb(0,32,96);"></option>
    <option id="112,48,160" value="112,48,160" style="background-color: rgb(112,48,160);"></option>
</select>

2.2、js中调用

$("#TitleColor").editableSelect({
    effects: 'slide',
    onSelect: function (element) {
        var rgb = element[0].id;
        $(this).val(rgb);
       $(this).css('background-color', 'rgb(' + rgb + ")");
    },
    onKeyUp: function () {
        var rgb = $(this).val();
        if (rgb == "" || rgb == null || rgb == undefined)
        $(this).css('background-color', 'rgb(255,255,255)');
       else {
           var temp = rgb.split(',');
           if (temp.length == 3)
              $(this).css("background-color", 'rgb(' + rgb + ")");
          else
             $(this).css('background-color', 'rgb(255,255,255)');
       }
    }
});