select下拉框插件jquery.editable-select的用法以及注意事项

项目中考虑到下拉框从后台动态获取的值比较多，用户体验不是很好，就考虑到下拉框既可以下拉选择，也可以手动填写，从网上查了一下，jquery.editable-select这个插件还挺符合就拿来用了。

插件下载地址：http://download.csdn.net/detail/lhx13636332274/9870125

这里先说一下大概用法（这里也是网上找的）：

<select  id= "test" >              <option value="1111">afgef</option>                       <option value="2222">adfge</option>                       <option value="3333">adssy</option>                       <option value="4444">adsa1</option>                       <option value="5555">ace00</option>                      <option value="6666">abcd2</option>                      <option value="7777">abcd1</option>                      <option value="8888">a8181</option>          </select>

JQuery调用的时候：

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

上面就是网上大概的用法，接下来说一下我遇到的问题以及注意事项：

本人前端是个菜鸟，也就大概看了一下插件里面的源码，自己理解了一下（如有错误，欢迎留言指正）：

首先会隐藏原来的select框，拼接一个input输入框和一个隐藏域，读取select下所有的数据赋值给<ul>标签下的<li>，

li里的value值就是我们option标签里的value值，li里的text就是option中的文本，这里问题就来了：

首先上代码：

jsp页面：

<label class="header-label" style="margin-left:3%; ">客户名称</label>
<select id="custselect" style="visibility: hidden;width:241.5px;">
<option value="" selected="selected" ></option>
<c:forEach items="${custMap}" var="map">
<option value="${map.key}" >${map.value}</option>
</c:forEach>
</select>

js里面：

$(function () {

    $("#custselect").editableSelect({
    isFilter:true,
    bg_iframe: true,
    case_sensitive: false, 
        items_then_scroll: 10  //十条显示滚动条
    });
})

这里要加一个option标签，否则插件生成input框里默认是一个上面循环出来的第一个值，由于我里面的map.key是从后台传过来的字符类型的数据，我在测试的时候，取$("#custselect").val()，无论取哪个下拉框的值，都是0，在网上搜了一下也有遇到这个问题的，但是没有给出很好的解决办法，这里首先说一下，由于插件里是把值放到li标签里了，从页面可以看出来：

select下拉框插件jquery.editable-select的用法以及注意事项