easyUI中select下拉框添加option选项

来源：互联网发布：如何建立网络销售平台编辑：程序博客网时间：2024/06/05 10:06

使用jquery easyui的下拉列表combobox碰上问题，下拉列表的项都是从
数据库读出来的，然后我想在动态生成的项中添加一项："<option value=''>=全部=</option>"。
但怎么也添加不成功。

首先试了直接用jquery对该下拉列表进行添加操作：

JavaScript code
?
1
2
3
4
5
6
7
8
$('#selUnin').combobox({
        url: _callback_url + '&action=getUnin',
        valueField: 'id',
        textField: 'text'            
       }
    });
 
$("#selUnin").append("<option value=''>=全部=</option>");

没作用，然后想了想得在数据加载成功后就行追加，就在对应的方法里
又尝试了下，还是没作用：

JavaScript code
?
1
2
3
4
5
6
7
8
$('#selUnin').combobox({
        url: _callback_url + '&action=getUnin',
        valueField: 'id',
        textField: 'text',
        onLoadSuccess: function(param) {
            $("#selUnin").append("<option value=''>=全部=</option>");            
        }
    });

在网上也查了很久，一直没能找到方法解决.经过学习得知:

因为jquery easyui的下拉列表combobox是用DIV模拟的（其实看看它的样式就应该想到）。

解决办法:

步骤如下:
1、一个空下拉框
<select id="customCombobox">
</select>

2、为下拉框添加子项(这时候可以是后台读过来的数据)
$("#customCombobox").append("<option value='1'>JAVA</option>");

3、将下拉框转化为EASYUI中的Combobox
$("#customCombobox").combobox({});

只要填充好数据再去转化那就一定不会出问题!

另外一种方法:

<input id="comCc" value="0" class="easyui-combobox" data-options="required:true,editable:false,valueField:'id',textField:'text',width:80" />

$(function () {
$.setAreabox('comCc', "/Report/test/test");//初始销区下拉框
})

================================================================我是分割线========================================

升级版

这次做项目遇到了一个问题，在easyui-combobox加载json数据中对象的属性。后台返回的json中包含一个对象，而我想调用对象中的属性，后台返回的json如下：

{"rows": [{"chances": [],"name": "系统管理员","password": "admin","status": 1,"userId": 1,"userName": "admin"},{"chances": [],"name": "于经理","password": "123456","status": 1,"userId": 2,"userName": "yulibin"},{"chances": [],"name": "郝经理","password": "123456","status": 1,"userId": 3,"userName": "haominghui"},{"chances": [],"name": "吴经理","password": "123456","status": 1,"userId": 4,"userName": "wumingliang"}],"total": 4}

json中包含total和rows，而rows下面才是我要显示在combobox的值，API规定必须用下面格式的json：

[{"id":1,"text":"text1"},{"id":2,"text":"text2"},{"id":3,"text":"text3","selected":true},{"id":4,"text":"text4"},{"id":5,"text":"text5"}]

按着常规讲我会像json.rows.userId 这样设置valueField属性，结果明显不行，但这并不出乎我的意料，就是出于尝试的心态。现在的问题是如何获得这个json的对象，并且调用时只用属性名userId,name。
其实，很简单就解决了，还是先看api示例：

$('#cc').combobox({url:'combobox_data.json',valueField:'id',textField:'text'});

看我是怎么解决的：

var url = "${pageContext.request.contextPath}/user_findUlist.action";$.getJSON(url, function(json) {$('#cc').combobox({data : json.rows,valueField:'userId',textField:'name'});});

combobox必须按着api指定格式加载json数据，我这里的json是层层嵌套的，所以肯定不信了，那我们可以换个思路。调用Jquery提供的getJSON方法，获取到我json，在初始化combobox使指定data属性为：json.rows，OK，就这么简单！！！看，数据取到了

easyui-combobox加载json中对象的属性

附录：

当我们用class初始化combobox对象后,他会自动把本身html >> select >> onChange的事件屏蔽掉。
有时候我们并不希望用户自己填写combobox的值，取而代之的是选择固定的值，解决办法：给combobox添加editable属性并设置为false。

0 0