Select 옵션(IE8 호환성 보기 모드)을 작동하는 JQuery의 버그_jquery

버그 장면:

개발자 도구를 통해 보면 드롭다운 목록 상자에 옵션이 있지만 클릭하여 선택할 때 아무것도 표시되지 않습니다.

재현 단계 :
이 문제는 계단식 드롭다운 상자에서 발생하며 첫 번째 목록이 변경되면 그에 따라 두 번째 목록의 값도 변경됩니다.
이 예에서는 다음 방법을 사용하여 데이터를 바인딩합니다.

코드 복사 코드는 다음과 같습니다.

//드롭다운 상자 바인딩
//ctnSelector: 드롭다운 상자 ID, # 포함,
//jsonData: JSON 데이터,
//txtField: 텍스트 필드 이름 ,
//valField: 값 필드 이름,
//strOptions: 기본적으로 추가되는 항목
function InitSelectOptions(ctnSelector, jsonData, txtField, valField, strOptions) {
if ($(ctnSelector). length == 0) { return false };
var optList = strOptions; if (typeof (jsonData) != 정의되지 않음) for (var jitem in jsonData) {
if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo") {
continue; .Base.js.
}
optList = "" jsonData[jitem][txtField] ""
}
$(ctnSelector).html(optList);
}


정상적으로 로딩되면 문제 없습니다!
그러나 첫 번째 드롭다운 상자의 값이 변경되고 두 번째 드롭다운 상자의 옵션이 지워지기 때문에
그래도 두 번째 드롭다운 상자를 클릭하여 항목을 선택하려고 하면

🎜>첫 번째 드롭다운 상자의 옵션을 변경하세요.
첫 번째 드롭다운 상자에 해당하는 두 번째 드롭다운 상자에 이전에 표시되었던 항목은 표시할 수 없습니다
. 첫 번째 항목만 표시되거나 스크립트를 통해 선택한 항목으로 설정됩니다!


해결책
:
DOM 방식을 사용하여 옵션을 조작합니다. 코드는 다음과 같습니다.


코드 복사

코드는 다음과 같습니다: //드롭다운 상자 바인딩//ctnSelector: 드롭다운 상자 ID, # 포함,

//jsonData : JSON 데이터,

//txtField: 텍스트 필드 이름,
//valField: 값 필드 이름,
//strOptions: 기본적으로 추가된 항목
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(); .val();
sel.options.add(newOption1);
if (typeof (jsonData) != 정의되지 않음) {
for (var jitem in jsonData) {
if (jitem == "insertAt" || jitem == "removeAt" || jitem == "moveTo") {
continue; //flareJ.Base.js로 인해 발생한 문제를 해결합니다.
}
var newOption = document.createElement("OPTION");
newOption.text = jsonData[jitem][txtField]
newOption.value = jsonData[jitem][valField]; 🎜>sel.options.add(newOption)
}
}
}