重构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方面中调用

function changeToComboBox(zone_list,comBoBoxId, tempTime){
    var width_s = $("#"+comBoBoxId).css("width")+"";
    var listWidth = (parseInt(width_s.substr(0,width_s.length-2)) + 18) +"px";
      var selectedComB = 0;
      if (zone_list.length > 0) {
          for(var i=0;i<zone_list.length;i++)
        {
            var a_zoneName = zone_list[i].zoneDescription;
            if (a_zoneName != "undefined")
            {
                if(a_zoneName == tempTime)
                {
                    selectedComB = i;
                }
            }
        }
      }
      $("#"+comBoBoxId).combobox({
           //width：组件的宽度
           //editable:是否可以直接定义到域中键入文本
           //valueField:基础数据值名称绑定到这个组合框
           //textField:基础数据的字段的名称绑定到这个组合框
           //url:从一个远程的URL加载列表数据
           listHeight:'300px',//该下拉列表高度
           listWidth:listWidth,//该下拉列表的宽度
           data: zone_list,//数据源 
           valueField: 'zoneTime',//主键
           textField: 'zoneDescription'//文本
       });
       //选中
           $("#"+comBoBoxId).combobox("setValue",zone_list[selectedComB].zoneTime);
}
 方法。参数说明：zone_list->json数据源，comBoBoxId->html的下拉框id,tempTime->需要选中的默认值。

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

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