因为业务需求,本人在工作中需要将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文件。