1. 程式人生 > >easyUI中select下拉框新增option選項

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。