Home >
Article > Web Front-end > Bug in JQuery operating Select's Options (IE8 compatibility view mode)_jquery
Bug in JQuery operating Select's Options (IE8 compatibility view mode)_jquery
WBOYOriginal
2016-05-16 17:36:031288browse
Bug scene:
Viewed through the developer tools, the drop-down list box has Options, but nothing is displayed when you click to select.
Steps to reproduce : This problem occurs in cascading drop-down boxes. When the first list changes, the value of the second list changes accordingly! In this example, the following method is used to bind data:
//Bind drop-down box //ctnSelector: drop-down box ID, with #, //jsonData: JSON data, //txtField: text field name, //valField: Value field name, //strOptions: items added by default function InitSelectOptions(ctnSelector, jsonData, txtField, valField, strOptions) { if ($(ctnSelector).length == 0) { return false; }; $(ctnSelector).html(''); var optList = strOptions; if (typeof (jsonData) != undefined) { for (var jitem in jsonData) { if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo") { continue; //Solve the problems caused by flareJ.Base.js. } optList = ""; } } $(ctnSelector).html(optList); }
No problem when loading normally! But because the value of the first drop-down box changes and the options in the second drop-down box are cleared, then you still click on the second drop-down box to try to select an item, Go and change the options of the first drop-down box. You will find that the items previously displayed in the second drop-down box that correspond to the first drop-down box cannot be displayed. can only be displayed. The first one, or set to the selected one via script!
Solution: Use DOM method to operate Options, the code is as follows:
//Bind drop-down box //ctnSelector: drop-down box ID, with #, //jsonData: JSON data, //txtField: text field name, //valField: value field name, //strOptions: items added by default 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 problems caused by flareJ.Base.js. } var newOption = document.createElement("OPTION"); newOption.text = jsonData[jitem][txtField]; newOption.value = jsonData[jitem][valField]; sel.options.add(newOption); } } }
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn