重构html的下拉框select

编辑器加载中...因为项目需要，需对html默认的下拉框select进行重构，一开始考虑利用div+css+javascript模拟下拉框，后来效果都不如人意。最终使用了jQuery-easyui的第三方组件，效果还不错，下面把使用方面介绍下：

1，导入jquery,jquery-easyui的相关js,css文件。

2，获取html的下拉框id,有朋友可能会问，不是重构了吗？为什么还要用html的下拉框，这里其实是jquery-easyui对html的下拉框包装了一层而已，主要控件是combobox.

3, 在onready方面中调用

 1 function changeToComboBox(zone_list,comBoBoxId, tempTime){
 2     var width_s = $("#"+comBoBoxId).css("width")+"";
 3     var listWidth = (parseInt(width_s.substr(0,width_s.length-2)) + 18) +"px";
 4       var selectedComB = 0;
 5       if (zone_list.length > 0) {
 6           for(var i=0;i<zone_list.length;i++)
 7         {
 8             var a_zoneName = zone_list[i].zoneDescription;
 9             if (a_zoneName != "undefined")
10             {
11                 if(a_zoneName == tempTime)
12                 {
13                     selectedComB = i;
14                 }
15             }
16         }
17       }
18       $("#"+comBoBoxId).combobox({
19            //width：组件的宽度
20            //editable:是否可以直接定义到域中键入文本
21            //valueField:基础数据值名称绑定到这个组合框
22            //textField:基础数据的字段的名称绑定到这个组合框
23            //url:从一个远程的URL加载列表数据
24            listHeight:'300px',//该下拉列表高度
25            listWidth:listWidth,//该下拉列表的宽度
26            data: zone_list,//数据源 
27            valueField: 'zoneTime',//主键
28            textField: 'zoneDescription'//文本
29        });
30        //选中
31            $("#"+comBoBoxId).combobox("setValue",zone_list[selectedComB].zoneTime);
32 }
33  方法。参数说明：zone_list->json数据源，comBoBoxId->html的下拉框id,tempTime->需要选中的默认值。

4，获取选中值的方法var a_zone = $('#a_timeZone').combobox('getValue');

5，也许项目会对combobox样式做修改，那么就需要对源代码进行修改，这点本人觉得很不好，不知道哪位大牛知道其他方法否。样式文件为：easyui.css。