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标签里了，从页面可以看出来：

注：ul 中的li定义的value会自动转换为int.数值，ie 浏览器下大于int最大值，显示int最大值，其他浏览器显示为0.而且无论你定义什么值，都会转int.默认为1

这就是无论怎么value值取都是0的原因，所以改一下源码就行了，

改过以后，就可以正常的取到$("#custselect").val()的值了，页面上也能看出来：