1. 程式人生 > >EasyUI實現combobox下拉框多選以及取值

EasyUI實現combobox下拉框多選以及取值

實現combobox下拉框多選的樣式如下,選中的資料底色為高亮黃色顯示,並會在輸入框中進行顯示,中間以“,”號分隔。

HTML程式碼:

<input class="easyui-combobox" id="questionType" style="width: 150px;">

js程式碼如下:

這裡下拉框的值是用url從後臺獲取,動態顯示出來的。

    //初始化試題型別
    $('#questionType').combobox({
        editable: false,// 不能直接輸入到列表框
        missingMesage: '請選擇',
        valueField: 'code_text',
        textField: 'code_text',
        multiple:true,// 設定下拉框的值可以多選
url: baselocation + '/sys/getSysCodeData', type: "post", queryParams: { "codeKind1": "試題型別" }, onShowPanel: function () { var v = $(this).combobox('panel')[0].childElementCount; // 判斷下拉框高度(如果下拉框的數值小於10個,那麼下拉框高度自動顯示,如果大於10個,下拉框高度最高200) if (v <= 10) { $(this).combobox('panel') .height("auto"); } else { $(this).combobox('panel') .height(200); } }, onLoadSuccess: function (res) { // 下拉框預設選擇第一項 if (res) { var val = $(this).combobox('getData'); $(this).combobox('select', val[0]['code_text']); //這個資料根據自己情況來設定 } } });
獲取下拉框選中的一個或多個值:
var questionType = $("#questionType").combobox("getValues");