easyUi之combobox

combobox在默认情况下是一种可编辑的下拉框，通过multiple属性设置该组件为单选(默认情况下为false，单选)还是多选。创建combobox组件的常见示例如下：

一种是通过<input>方式：

<input id="state"
    class="easyui-combobox"
    name="state"
    url="../combobox/action_combobox_data.json"
    valueField="id"
    textField="text"
    multiple=true
    editable=false
    panelHeight="auto"
    style="width:200px;">

另外一种是通过javascript的方式：

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

(function(){    // 继承于combo也就是说具有combo的一切属性和方法，包括事件

("#cc").combobox({
   url:"../combobox/action_combobox_data.json",
   textField:"text",
   valueField:"id",
   multiple:false,
   editable:false,
   panelHeight:"auto",
   width:200,
   onChange:function(oldVal, newVal) {
    debugger;
    alert(oldVal);
    alert(newVal);
    $(this).data("oldVal", oldVal);
   },
   onSelect:function(rec) {

    // 这里起到下拉框连带(dependent comboboxes)的效果。
    var url="../combobox/combobox_data1.json"
    ("#dd").combobox("reload", url);      var oldVal =(this).data("oldVal")
    alert(oldVal);
   }
  });
 
 });

其中json文件如下：

[{
"id":"AL",
"text":"Alabama"
},{
"id":"AK",
"text":"Alaska"
},{
"id":"AZ",
"text":"Arizona",
"selected":true
},{
"id":"AR",
"text":"Arkansas"
},{
"id":"CA",
"text":"California"
}]

 

    总结：由于combobox继承于combo组件，因此具有combo的一切属性和方法，包括事件，例如onChange事件（比如上例方式二）。