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

Source: Internet
Author: User

Bug site:


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:
Copy codeThe 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 + = "<option value = '" + jsonData [jitem] [valField] + "'>" + jsonData [jitem] [txtField] + "</option> ";
}
}
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:
Copy codeThe 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 );
}
}
}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.