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