一:预定义结构的 select 元素创建组合框(combobox)值固定写死
<select class="easyui-combobox" name="state" style="width: 200px;">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
</select>
效果图:
二:使用 javascript 创建组合框(combobox) 动态加载
<input id="cc" name="dept" value="aa">
JS代码:
$('#cc').combobox({
url: 'test_list.aspx?id=1',
valueField: 'id',
textField: 'text'
});
C#后台代码:
protected void Page_Load(object sender, EventArgs e)
{
if (Request["id"] == "")
{
string josn =
"[{ " +
" \"id\":1, " +
" \"text\":\"text1\" " +
"},{ " +
" \"id\":2, " +
" \"text\":\"text2\" " +
"},{ " +
" \"id\":3, " +
" \"text\":\"text3\", " +
" \"selected\":true " +
"},{ " +
" \"id\":4, " +
" \"text\":\"text4\" " +
"},{ " +
" \"id\":5, " +
" \"text\":\"text5\" " +
"}] "; Response.Clear();
Response.Write(josn);
Response.End();
} }
效果图:
三:创建两个依赖的组合框(combobox) 联动效果:
<input id="cc1" class="easyui-combobox" data-options="
valueField: 'id',
textField: 'text',
url: 'test_list.aspx?id=1',
onSelect: function(rec){
var url = 'test_list.aspx?id='+rec.id;
$('#cc2').combobox('reload', url);
}">
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'"></div>
JS获取combobox值
//取ID
$('#cc').combobox('getValue');
//取显示的name
$('#cc').combobox('getText');