Я использую вызов ajax для обновления меню выбора. Вызов ajax помещает список в мое меню выбора, запустив его из другого .php-файла.
Вот фрагмент вставки JS:
if (req.status == 200) { document.getElementById('countydiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); }
И вот HTML:
<label for="county">County:</label> <div id="countydiv"> <select name="county"> <option>Select State First</option> </select> </div>
Достаточно легко. Скрипт работает, но ТОЛЬКО, если там находится <div id="countydiv">
.
Как я могу изменить JavaScript для работы с разметкой, которая выглядит так?
<label for="county">County:</label> <select name="county"> <option>Select State First</option> </select>
Обновление: Возможно, я должен включить всю функцию:
function getCounty(stateId) { var strURL="findCounty.php?state="+stateId; var req = getXMLHTTP(); if (req) { req.onreadystatechange = function() { if (req.readyState == 4) { // only if "OK" if (req.status == 200) { document.getElementById('countydiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); } } } req.open("GET", strURL, true); req.send(null); }
}
И разметка:
<p> <label for="state">State:</label> <select name="state" onChange="getCounty(this.value)"> <option>Select State...</option> <option>1</option> <option>2</option> <option>3</option> </select> </p> <p> <label for="county">County:</label> <select name="county"> <option>Select State First</option> </select> </p>
Попробуй это:
if (req.status == 200) { var selects = document.getElementsByTagName("select"); for(var i=0;i<selects.length;i++) { var s = selects[i]; if(s.name == "county") { var replacement = document.createElement("div"); replacement.innerHTML = req.responseText; s.parentNode.insertBefore(s,replacement); s.parentNode.removeNode(s); break; } } //document.getElementById('countydiv').innerHTML=req.responseText; } else { alert("There was a problem while using XMLHTTP:\n" + req.statusText); }
Без какого-либо родительского узла вам нужно иметь дело с тегом select, и вы не можете использовать responseText, как хотите, Json может помочь вам заполнить.
if (req.status == 200) { var i = 0; var options = document.getElementById("country").options; var json = eval("(" + req.responseText + ")"); for (var key in json) { var value = json[key]; options[i++] = new Option(key, value); } } <label for="county">County:</label> <select name="county" id="country"></select>
Ответ от php:
{ "USA": 1, "United Kingdom": 2 }
Я бы предложил перейти на jquery-маршрут, чтобы сделать его проще:
См. Эту ссылку для чего-то, что должно привести вас в правильном направлении: как удалить все параметры окна выбора, а затем добавить один параметр и выбрать его с помощью jQuery?
Кроме того, в IE6 есть ошибка (если вы ее поддерживаете) с динамически Select
элементами Select
о которых вы должны знать. http://support.microsoft.com/kb/276228