.net+easyui--combobox

Posted 2020-06-09

一：预定义结构的 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"] == "1")
            {
                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‘);