Как обновить меню выбора с AJAX без <div>внутри формы - PullRequest
Новая
       12

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

4 голосов
/ 21 февраля 2010

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

Ответы [ 3 ]

0 голосов
/ 21 февраля 2010

Попробуйте это: 

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);
}
0 голосов
/ 21 февраля 2010

Я бы предложил пойти по пути jquery, чтобы вам было проще:

Смотрите по этой ссылке что-то, что должно привести вас в правильном направлении: Как удалить все параметры в окне выбора, а затем добавить один вариант и выбрать его с помощью jQuery?

Кроме того, в IE6 есть ошибка (если вы заботитесь о ее поддержке) с динамически заполняющимися Select элементами, о которых вам следует знать. http://support.microsoft.com/kb/276228

0 голосов
/ 21 февраля 2010

Без родительского узла вам придется иметь дело с тегом 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 }
...