项目--Combobox使用小结

    项目过程中接触Combobox有段时间时间了， 最近使用比较频繁，做一下总结：

    一、创建

   （1）通过<select></select>方法创建

    在HTML学习课程中，有讲到通过<select>方法来创建下拉列表，具体代码如下：

<select size="2" name="education">                 <option value=""selected>初中</option>                 <option value="高中">高中</option>                 <option value="大学">大学</option>                 <option value="硕士">硕士</option>                 <option value="博士">博士</option> </select>

    可是这样子的效果是这个样子：

                         

    无奈只好利用easyui来“装修”一下显示效果了：

<select id="cc" class="easyui-combobox" name="dept" style="width:200px;">   <option value="aa">初中</option>           <option>高中</option>           <option>大学</option>           <option>研究生</option>     </select>

       仅仅添加了一个class = “easyui-combobox”就搞定了（前提是添加对于easyui的引用）。
                  

  （2）通过<input></input>来创建

         代码演示：

<input id="type" class="easyui-combobox" name="type"               data-options="valueField:'id',textField:'text',url:'/CityBasicInfo/queryType'" value="一类型">

           上述例子中，data-options后面接的是url，执行相应方法后的返回值作为选项返回到下拉列表当中，另外一种写法：

<input id="Education" class="easyui-combobox" name="Education" style="width: 150px;"         panelHeight="auto"         data-options="valueField: 'value',textField: 'label',data: [{label: '博士研究生',value:'1',selected:true},{label: '硕士研究生',value: '2'},{label: '本科',value: '3'},{label: '专科',value: '4'},{label: '高中',value: '5'},{label: '高职',value: '6'},{label: '其他',value: '7'}]" />

    直接以键值对的形式把数据添加到组合框中，一般用于选项确定的情况下。

 

   （3）通过js来创建combobox框

<pre name="code" class="html"> //html页面中的代码

<input id="cc" name="dept" value="aa">

//js文件中的代码
$('#cc').combobox({ url:'combobox_data.json', valueField:'id', textField:'text' });

    将一个组合框在html页面和组合框中同时进行编写，这样子的好处在于使得html页面更加简洁，阅读方便，代码中不妨一试。

 

 

二、选值

     对于如何获取combobox中的值，简单来讲：

    （1）获取当前选中的值

       $('#com').combobox('getValue')

     （2）获取当前选中的文字

       $('#com').combobox('getText')

               前者，获取键值对中的value；后者，获取键值对中的text，即下拉框中看到的选定值，根据需要进行选择。

 

       扩展：

     前面所分享的combobox中的值，仅仅是单个的值，如何获取当中的多个值呢？

    $('#mycomBox').combobox('getValues');

            只需要把其中的”getValue”改为”getValues”即可。

 

    以上是我在项目过程中积累的对于combobox控件的认识，从“建立”和“获值”两个方面进行了简单的分享总结。