Easyui ComboBox Implementation cascading

The following ComboBox is introduced first:

Easyui Rewrite Select, instead of a ComboBox, there are several ways to create a ComboBox, for example:

1, use the Select Tag, and add class= "Easyui-combobox", this way is more suitable for static options

2, using the input tag, and add class= "Easyui-combobox", followed by Data-options, able to load data in local or remote mode

3, the use of JS, and 2 basically the same, just to set some properties of the ComboBox separated into JS

Here is the idea of cascading:

ComboBox Implementation Cascade is basically similar to select, for example provinces and cities Cascade

When the province has chosen this event, the city's selection box will refresh the data to get all the cities under the current province

Then the key point is--"receive event--" refresh the second level of the selection box

ComboBox has to provide onselect this event point, and pass in a selected record REC, for example, we can take Rec's primary key rec.id (for example, Zhejiang, ID is 29), then we can get this 29 to the background to query the city of Zhejiang saved JSON data, This JSON is the data that needs to be placed in the city ComboBox.

So start doing it:

<tr>    <td> province:</td>    <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>    <td><input class= "Easyui-combobox" panelheight = "Auto" name= "City" data-options= "     prompt: ' Please fill in the province name first '    " >    </td></tr>

Problems that may be encountered in use:

1, after specifying name for the ComboBox, after Easyui own parsing, the resulting ComboBox (that is, select) does not have the name attribute, instead of ComboName, because name is the name of input. So to get a ComboBox based on name to use ComboName

2, $ (' [comboname=city] '). ComboBox (' Clear '); This step is also necessary, otherwise the ComboBox in the previously selected value will not be cleared, for example, the previous election is Zhejiang-Hangzhou (id 1), if the change of the province to Jiangsu, then if not clear, then the city becomes the current province ID 1 city, namely Nanjing (ID 1). If this ID is not recorded in the appropriate province, then only an ID will be displayed, so obviously it is not what we want to see.

Easyui ComboBox Implementation cascading