select选择框控件-jquery.editable-select

叶谦
2023-12-01

 

    因为业务需求,本人在工作中需要将select选择框变成可编辑可输入的。但浏览器默认的select是不能编辑的,也不能输入的。为了实现可编辑可输入的功能,本人使用jquery实现了和浏览器select类似的功能,并且可以编辑,可以输入。下载地址:https://codeload.github.com/feshy2013/jquery.editable-select/zip/master。里面有使用用例。

   例如,下面的一个select

   

<select  name = "drpPublisher2" >
              <option value="3225">afgef</option>
         
              <option value="3223">adfge</option>
          
             <option value="1036">adssy</option>
          
             <option value="1035">adsa1</option>
          
             <option value="1034">ace00</option>
         
             <option value="1033">abcd2</option>
         
             <option value="1032">abcd1</option>
         
             <option value="1031">a8181</option>
          </select>

   使用jquery调用:

$('#drpPublisher2').editableSelect(
     {
       bg_iframe: true, //是否加iframe
       onSelect: function(list_item) {
         //当改变select下拉选项值的时候调用
         $('#ddd2').val(this.text.val());
       },
       case_sensitive: false, // 是否匹配
                              
       items_then_scroll: 10 ,// 设置下拉选项的数目
       isFilter:true //是否根据条件过滤下拉选项
     }
   );

 如果想看实现的效果,请下载:https://codeload.github.com/feshy2013/jquery.editable-select/zip/master,

运行demo.html文件。

 类似资料: