easyUI中select下拉框添加option选项

使用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中对象的属性

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

附录:

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

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值