1. html程式碼

<label>性別：</label>
<input class="easyui-combobox" style="width: 100px;" type="text" id="gender" />

2.顯示

3.js程式碼

//以下的方式可以解決瀏覽器漢字亂碼問題
/********************1.載入本地資料*******************/
// 頁面載入後顯示錶資料
$(function() {
    var queryData = {};// 可新增一些預設條件
    InitGrid(queryData);// 初始化Datagrid表格資料
 

    InitDictItem(); // 初始化字典資訊
});

// 初始化字典資訊
function InitDictItem() {
    // 性別
    BindDictGender('gender');
}

// 繫結性別/男：1；女：2；全部：0
function BindDictGender(comboid) {
    // 操作型別 全部 男 女
    // data = [{ "Name": "\u5168\u90e8", "Value": 0 }, { "Name": "\u7537",
    // "Value": 1 }, { "Name": "\u5973", "Value": 2 }];
 

    data = [ {
        "Name" : "\u7537",//男
        "Value" : 1
    }, {
        "Name" : "\u5973",//女
        "Value" : 0
    } ];
    $('#' + comboid).combobox({
        valueField : 'Value',
        textField : 'Name',
        panelHeight : 'auto',
        required : true,
        editable : false,// 不可編輯，只能選擇
 

        data : data
    });
    $('#' + comboid).combobox('select', "1");
}

/********************2.載入資料庫資料*******************/
//繫結字典資訊Code,設定預設值為{
//            Code:"";
//            Name:"-請選擇-";
//      }
function BindBuildingDictItem(comboid, catlog) {
    $.ajax({
        type: 'post',
        url: '/Common/GetComboBoxValue',//訪問路徑
        dataType: 'json',
        data: { name: catlog },
        success: function (data) {
            data.unshift({ "Name": "\u002d\u8bf7\u9009\u62e9\u002d", "Code": "" });

            $('#' + comboid).combobox({
                valueField: 'Code',
                textField: 'Name',
                panelHeight: 'auto',
                required: true,
                editable: false,//不可編輯，只能選擇
                data: data
            });
            $('#' + comboid).combobox('select', "");
        }
    });
}

/********************3.不解決漢字亂碼*******************/
BindDictItem("LiveStatue", '你的url');
//初始化字典資訊的控制元件繫結
function BindDictItem(comboid,url) {
    $('#' + comboid).combobox({
        valueField: 'Code',
        textField: 'Name',
        url: url,
        panelHeight: 'auto',
        required: true,
        editable: true,//不可編輯，只能選擇
        value: '全部'
    });
}

4.Json資料

{ {
        "Code": "1",
        "Name": "男"
    }, {
        "Code": "0",
        "Name": "女"
    }
}

5.設定預設選項和取值

//設定預設選項
$('#gender').combobox('select', 1);
//取值
var gender = $('#gender').combobox('getValue');

6.年份小例子

///////////////////////////入學年份///////////////////////////////////////
$('#EduStartYear').combobox({
    valueField: 'Value',
    textField: 'Name',
    panelHeight: 'auto',
    required: true,
    editable: false, //不可編輯，只能選擇
});
var data = []; //建立年度陣列
var thisYear = new Date().getUTCFullYear(); //今年
var startYear = thisYear - 5; //起始年份

var endYear = thisYear + 5; //結束年份

//陣列新增值今年的前後五年
for (var i = 0; i <= 10; i++) {
    data.push({
        "Value": startYear + i,
        "Name": startYear + i
    });
}
$("#EduStartYear").combobox("clear")//下拉框載入資料,設定預設值為今年
                .combobox("loadData", data)
                .combobox("setValue", thisYear); 
//$("#EduStartYear").combobox("setValue", thisYear);//設定預設值為今年