The combobox Implementation of easyUI cascade and easyuicombobox implementation

The combobox Implementation of easyUI cascade and easyuicombobox implementation

First, let's briefly introduce combobox:

EasyUI overrides select and replaces it with combobox. You can create a combobox in the following ways:

1. Use the select label and add class = "easyui-combobox". This method is more suitable for static options.

2. Use the input tag, and add class = "easyui-combobox" to keep up with data-options. You can load data in local or remote mode.

3. The js method is basically the same as the method 2, but the combobox attribute settings are separated into js.

The following is the cascade idea:

The implementation of combobox cascade is similar to that of select, for example, cascade between province and city.

When the province selects this event, the city selection box will refresh the data to obtain all the cities in the current province.

The key point is -- receive events -- refresh the second-level selection box.

Combobox provides the onSelect event point and passes in a selected record rec. For example, we can take rec's primary key rec. id (for example, Zhejiang Province and id 29). We can get this 29 to query the Json data of cities in Zhejiang province in the background. This Json string is the data that needs to be placed in the city combobox.

Let's get started:

<Tr> <td> province: </td> <input class = "easyui-combobox" name = "province" data-options = "method: 'get ', mode: 'remote', url: 'test/getProvinceList ', onSelect: function (rec) {$ (' [comboname = city] '). combobox ('clear'); $ ('[comboname = city]'). combobox ('reload', 'test/getCityListByProvince? Id = '+ rec. id) ;}, onLoadSuccess: function () {var value = $ (this). combobox ('getvalue'); if (value! = '') {<Span style =" white-space: pre "> </span> $ ('[comboname = city]'). combobox ('reload', 'test/getCityListByProvince? Id = '+ $ (this ). combobox ('getvalue') ;}}</td> <td> city: </td> <input class = "easyui-combobox" panelHeight = "auto" name = "city" data-options = "prompt: 'Enter the province name' "> </td> </tr>

Problems that may occur during use:

1. After the name is specified for combobox and parsed by easyUI, the generated combobox (that is, select) does not have the name attribute. Instead, it uses comboname, because name must be the name of input. Therefore, you must use comboname to obtain the combobox according to the name.

2. $ ('[comboname = city]'). combobox ('clear'); this step is also necessary. Otherwise, the previously selected value in combobox cannot be cleared. For example, the previously selected value is Zhejiang-Hangzhou (id 1 ), if the province is changed to Jiangsu at this time, if clear is not added, the city becomes the city with id 1 of the current province, that is, Nanjing (id 1 ). If there is no record for this id in the corresponding province, only one id will be displayed, which is obviously not what we want to see.

Jquery-easyui: combobox cascading display is not available!

Try it like this.
Var url = 'combobox _ user. php? Uid = '+ $ ("# Uid"). combobox ("getValue"); no more


Usage of easyui combobox

I used getJSON url and data to obtain the data.
Var url = "user/getRoles. action ";
$. GetJSON (url, function (json ){
$ ('# Roleop'). combobox ({
Data: json
ValueField: 'rolid ',
TextField: 'rolname'
});
});