Bug in selecting Options operations by JQuery (IE8 Compatibility View Mode) _ jquery

JQuery operates the Select Options Bug in IE8 Compatibility View mode. This article will reproduce the Bug and provide detailed solutions. If you are interested, refer to the following, I hope to help you with the Bug:

You can use the Developer Tools to check whether the drop-down list box contains Options, but the drop-down list box does not display anything when you click it.

Procedure:
This problem occurs in the cascade drop-down box. The first list is changed, and the value of the second list is changed!
In this example, use the following method to bind data:

The Code is as follows:

// Bind the drop-down list
// CtnSelector: the ID of the drop-down list, with,
// JsonData: JSON data,
// TxtField: text field name,
// ValField: Value Field name,
// StrOptions: the default value.
Function InitSelectOptions (ctnSelector, jsonData, txtField, valField, strOptions ){
If ($ (ctnSelector). length = 0) {return false ;};
Optional (ctnselector).html ('');
Var optList = strOptions;
If (typeof (jsonData )! = Undefined ){
For (var jitem in jsonData ){
If (jitem = "insertAt" | jitem = "removeAt" | jitem = "moveTo "){
Continue; // solve the problem caused by flareJ. Base. js.
}
OptList + =""+ JsonData [jitem] [txtField] +"";
}
}
Optional (ctnselector).html (optList );
}

Normal loading will not cause any problems!
However, when the value of the first drop-down box changes, the options of the second drop-down box are cleared,
Then, click the second drop-down box and try to select one,
Then change the option in the first drop-down box,
You will find that the items shown in the second drop-down box corresponding to the first drop-down box are not displayed,
Only the first one can be displayed, or the selected one can be set through the script!

Solution:
Use the DOM method to operate Options. The Code is as follows:

The Code is as follows:

// Bind the drop-down list
// CtnSelector: the ID of the drop-down list, with,
// JsonData: JSON data,
// TxtField: text field name,
// ValField: Value Field name,
// StrOptions: the default value.
Function InitSelectOptions (ctnSelector, jsonData, txtField, valField, strOptions ){
If ($ (ctnSelector). length = 0) {return false ;};
$ (CtnSelector). empty ();
Var sel = $ (ctnSelector). get (0 );
Var newOpt = $ (strOptions );
Var newOption1 = document. createElement ("OPTION ");
NewOption1.text = newOpt. text ();
NewOption1.value = newOpt. val ();
Sel. options. add (newOption1 );
If (typeof (jsonData )! = Undefined ){
For (var jitem in jsonData ){
If (jitem = "insertAt" | jitem = "removeAt" | jitem = "moveTo "){
Continue; // solve the problem caused by flareJ. Base. js.
}
Var newOption = document. createElement ("OPTION ");
NewOption. text = jsonData [jitem] [txtField];
NewOption. value = jsonData [jitem] [valField];
Sel. options. add (newOption );
}
}
}