Intereting Posts

Как обновить меню «Выбрать» с помощью AJAX без <div> внутри формы

Я использую вызов 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