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

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');

总结:
1、一定要遵循easyui-combobox里面的数据格式,才能得到想要的效果。
2、参考别人的代码的时候,要先理解,再适当使用
3、遇到问题要直击根源才能尽快解决问题,像修改easyui-combobox的时候,单单跟着别人的代码修改都改不好,最后理解json格式才总算改好了。

更多操作可以参考http://www.jeasyui.net/plugins/169.html里面的属性,方法,事件的使用简介

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值