easyui drop down list box

Using jquery easyui's drop-down list combobox has a problem, the items of the drop-down list are
read from the database, and then I want to add an item to the dynamically generated item: "<option value=''>=all=</option >".
But how to add unsuccessfully.

First tried adding the drop-down list directly with jquery:

        url: _callback_url + '&action=getUnin',

        valueField: 'id',

        textField: 'text'           




$("#selUnin").append("<option value=''>=all=</option>");

It doesn't work, then after thinking about it, it will be added after the data is loaded successfully, just in the corresponding method
Tried it again, but it still doesn't work:


        url: _callback_url + '&action=getUnin',

        valueField: 'id',

        textField: 'text',

            $("#selUnin").append("<option value=''>=all=</option>");           



I have also checked the Internet for a long time, but have not been able to find a solution. After learning :

Because the drop-down list combobox of jQuery easyui is simulated by DIV (in fact, it should be thought of when you look at its style).

Solution: The

steps are as follows:
1. An empty drop-down box
<select id="customCombobox"> 

2. Add a child item to the drop-down box (this time it can be the data read from the background)
$("#customCombobox") .append("<option value='1'>Java</option>");

3. Convert the drop-down box to Combobox in EASYUI

Just fill in the data and then To convert then there will be no problem!

Another method:

<input id="comCc" value="0" class="easyui-combobox" data-options="required:true,editable:false,valueField:'

            $.setAreabox('comCc', "/Report/test/test");//Initial pin area drop-down box

======================= ========================================== I am the dividing line ===== ==================================== The

upgraded version

encountered a problem in this project, in easyui-combobox Load properties of objects in json data. The json returned by the background contains an object, and I want to call the properties in the object. The json returned by the background is as follows:

"rows": [
"chances": [],
"name": "system administrator",
"password ": "admin",
"status": 1,
"userId": 1,
"userName": "admin"
"chances": [],
"name": "Manager Yu",
"password": "123456 ",
"status": 1,

"password": "123456",
"status": 1,
"userId": 3,
"userName": "haominghui"
"chances": [],
"name": "Manager Wu",
"password": "123456",
"status": 1,
"userId": 4,
"userName": "wumingliang"
"total": 4
} The

json contains total and rows, and below the rows is what I want to display in the combobox value, the API stipulates that the following format must be used:

"id":3 ,

As a rule, I would set the valueField property like json.rows.userId, and the result is obviously not good, but this is not unexpected, it is just out of the mentality of trying. The question now is how to get this json object, and only use the attribute name userId, name when calling.
In fact, it's very easy to solve, let's look at the api example first:

textField:'text' }

How to solve it:

var url = "${pageContext.request.contextPath}/user_findUlist.action";
$.getJSON(url, function(json) {
data : json.rows,

The combobox must load the json data in the format specified by the api. The json here is nested in layers, so I must not believe it, then we can change the way of thinking. Call the getJSON method provided by Jquery, get my json, and initialize the combobox so that the specified data attribute is: json. rows, OK, it's that simple! ! !
Look, the data is obtained from easyui-combobox to load the properties

of objects in json


    When we initialize the combobox object with class, it will automatically block its own html >> select >> onChange event.
    Sometimes we don't want users to fill in the value of the combobox by themselves, but instead choose a fixed value. The solution: add the editable attribute to the combobox and set it to false.

Use Cases:

Create drop-down list boxes through three methods: <select> element, <input> tag, and Javascript.

1. Create a drop-down list box with a predefined structure through the <select> element.

<select id=”cc” class=”easyui-combobox” name=”dept” style=”width:200px;”>
<option value=”aa”>aitem1</option>

2. Create a drop-down list box through the <input> tag.

<input id=”cc” class=”easyui-combobox” name=”dept”
data-options=”valueField:’id’,textField:’text’,url:’get_data.php'” />

3. Create a drop-down list box using Javascript.

<input id=”cc” name=”dept” value=”aa”>


Create 2 dropdown list boxes with dependencies.

code show as below:

<input id=”cc1″ class=”easyui-combobox” data-options=”
valueField: ‘id’,
textField: ‘text’,
url: ‘get_data1.php’,
onSelect: function(rec){
var url = ‘get_data2.php?id=’+rec.id;
$(‘#cc2′).combobox(‘reload’, url);
}” />
<input id=”cc2″ class=”easyui-combobox” data-options=”valueField:’id’,textField:’text'” />

JSON data formatting example:



The properties of the drop-down list box are extended from combo (custom drop-down box). The new properties of the drop-down list box are as follows:

attribute name   attribute value type description  
valueField string       The underlying data value name is bound to the drop-down list box.  
textField string     The underlying data field name is bound to the drop-down list box.  
groupField string Specify the field name of the grouping (Translator's Note: The field of the grouping is determined by the data source) . (This property is available since version 1.3.4)  
groupFormatter function(group) Returns the grouped header text formatted to display grouped items (this property is available since version 1.3.4)
Code example:


groupFormatter: function(group){
return '<span style="color:red">' + group
 + '</span>';

mode string Defines how to read the list data when the text changes. When set to 'remote', the dropdown list box will load data from the server. When set to "remote" mode, user input will be sent to the HTTP request parameter named 'q' to the server to retrieve new data.  
url string Load remote list data via URL.  
method string HTTP method to retrieve data (POST/GET).  
data array The data list is loaded. Code example:


<input class="easyui-combobox" data-options="
		valueField: 'label',
		textField: 'value',
		data: [{
			label: 'java',
			value: 'Java'
			label: 'perl',
			value: 'Perl'
			label: 'ruby',
			value: 'Ruby'
		}]" />
filter function Defines how to filter local data when 'mode' is set to 'local', the function has 2 parameters:
q: the text entered by the user.
row: List row data.
Returns true to allow rows to be displayed. Code example:


filter: function(q, row){
var opts = $(this).combobox('options');
return row[opts.textField].indexOf(q) == 0;
formatter function 定义如何渲染行。该函数接受1个参数:row。代码示例:


formatter: function(row){
var opts = $(this).combobox('options');
return row[opts.textField];
loader function(param,success,error) 定义了如何从远程服务器加载数据。返回false可以忽略该动作。该函数具备如下参数:
loadFilter function(data) 返回过滤后的数据并显示。(该属性自1.3.3版开始可用)



事件名 事件参数 描述
onBeforeLoad param 在请求加载数据之前触发,返回false取消该加载动作。代码示例:


// 在加载服务器数据之前改变http请求参数的值
	onBeforeLoad: function(param){
		param.id = 2;
		param.language = 'js';
onLoadSuccess none 在加载远程数据成功的时候触发。
onLoadError none 在加载远程数据失败的时候触发。
onSelect record 在用户选择列表项的时候触发。
onUnselect record 在用户取消选择列表项的时候触发。



方法名 方法参数 描述
options none 返回属性对象。
getData none 返回加载数据。
loadData data 读取本地列表数据。
reload url 请求远程列表数据。通过’url’参数重写原始URL值。代码示例:


$('#cc').combobox('reload');      // 使用旧的URL重新载入列表数据
$('#cc').combobox('reload','get_data.php');  // 使用新的URL重新载入列表数据
setValues values 设置下拉列表框值数组。代码示例:


$('#cc').combobox('setValues', ['001','002']);
setValue value 设置下拉列表框的值。代码示例:


$('#cc').combobox('setValue', '001');
clear none 清除下拉列表框的值。
select value 选择指定项。
unselect value 取消选择指定项。

Guess you like