easyui系列一 下拉框之组合框combobox

 

一、基础组合框

示例

<select class="easyui-combobox" name="state" style="width:200px;">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option> 
</select>

PS：宽度可用百分比

 

二、实战运用

1.  设置默认值

通过onLoadSuccess事件来实现

<input id="cbType" class="easyui-combobox" data-options="url:'/xxxx',onLoadSuccess:onLoadSuccess,editable:false,valueField:'id',textField:'text',multiple:false" style="width: 120px; " />

<script>
    function onLoadSuccess(data) {  
        if (data && data.length > 0) {
            var v = $("#cbType").combobox('getValue'); 
            if (!v) $("#cbType").combobox('setValue', data[0].id);
        }
    }
</script>

PS：同时也用于创建和编辑页面，编辑在页面加载后设置： $("#cbType").combobox("setValue", row[0].Type);

2.获取当前选择项　

通过onSelect事件来实现;
场景：同时要获取到选中选项的id和文本

3.可编辑状态

通过设置data-option实现：editable:false