EasyUI ComboBox 獲取值的正確姿勢：jQuery 與原生 API 對比

在 EasyUI 中如何準確獲取下拉框的選中值與文本

EasyUI 的 <select> 轉化為 ComboBox 後，原生 DOM 屬性不再同步，必須使用其提供的 API。本文匯總最常用的取值方式。

HTML 結構

<select id="city" class="easyui-combobox" name="city" 
        data-options="valueField:'id', textField:'text', url:'/api/cities'">
</select>
<button id="btnGet">獲取值</button>

方法一：combobox('getValue') —— 獲取 valueField

$('#btnGet').click(function() {
    var value = $('#city').combobox('getValue');  // 返回綁定的 id
    console.log('Value:', value);
});

方法二：combobox('getText') —— 獲取顯示文本

var text = $('#city').combobox('getText');  // 返回用戶看到的文字

方法三：combobox('getData') —— 獲取完整數據行

var row = $('#city').combobox('getData');  // 返回當前選中行的完整對象 {id: 1, text: '北京', ...}
if (row) {
    console.log('完整數據:', row);
}

常見誤區

動態設置值（回顯）

// 設置 valueField
$('#city').combobox('setValue', '2');  // 選中 id=2 的項

// 設置 textField (不推薦，可能重複)
$('#city').combobox('setText', '上海');

完整事件監聽示例

$('#city').combobox({
    onSelect: function(record) {
        console.log('用戶選中:', record.id, record.text);
        // 這裡可直接觸發業務邏輯
    }
});

掌握 getValue/getText/getData 三大核心 API，配合 onSelect 事件，即可應對所有 ComboBox 取值場景。