easyui-combobox动态修改下拉框内容以及修改初始显示的选项

最新推荐文章于 2021-03-19 14:29:15 发布

maslii

最新推荐文章于 2021-03-19 14:29:15 发布

阅读量7.7k

点赞数 1

分类专栏：前端文章标签：前端 easyui-combobox select

本文链接：https://blog.csdn.net/Maslii/article/details/80002908

版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用EasyUI的Combobox组件实现根据不同用户显示不同下拉框内容的功能。通过HTML和JS代码示例展示了动态设置下拉框内容及初始化选中项的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

easyui-combobox是EasyUI提供的处理方式，最近在修改页面用到了这个，大概需求就是根据不同的访问人员来显示不同下拉框内容，先看看例子：

HTML代码：

<select id="MyId" 
        data-options="editable:false,
                      valueField:'id', <%--id、name与js里面的对应--%>
                      textField:'text'"
        name="Myname"  
        class="easyui-combobox" 
        style="width:220px" 
        onchange="viewShowflag()" >

        <option value='0'>否</option>
        <option value='1'>是</option>
</select>

js代码：

//动态设置下拉框里面要显示的值
$("#MyId").combobox(
    "loadData", //加载本地列表数据
    [
        //json格式
        { "text": "否", "id": "0" },
        { "text": "是", "id": "1" }
    ]
);

/*选择初始化下拉框的值，就是加载后一开始显示的值，
否则，如果动态加载的值里面没有id为0的选项的时候，
初始化还是会自己去找id为0的选项，当然就找不到啦，结果就显示为0.*/
$("#MyId").combobox("select", "1");

也可以这样子，直接设置初始化：

$("#MyId").combobox(
    "loadData", 
    [
        { "text": "否", "id": "0" },
        { "text": "是", "id": "1" ,"selected":true}
    ]
);

或者这样

将下拉框的内容先清空，然后再加入新的内容

        $("#MyId").combobox('clear');

        json = '[{"id":"0","text":"否","selected":true},{"id":"1","text":"是"}]';
        data = $.parseJSON(json);

        $("#MyId").combobox({ 
            //url:'combobox_data.json',   
            valueField:'id',   
            textField:'text',
            data:data
        });

        $('#MyId').combobox('disable');