如何更新选择菜单与AJAX瓦特/＆LT; D​​IV＆GT;内部形状 [英] How to update Select menu with AJAX w/out <div> inside form

问题描述

我使用Ajax调用更新选择菜单。 Ajax调用通过从不同的PHP文件运行放列表到我的选择菜单。

下面是JS插入片段：

 如果（req.status == 200）{
        的document.getElementById（'countydiv）的innerHTML = req.responseText。
} 其他 {
        警报（有同时使用XMLHTTP是个问题：\ N+ req.statusText）;
}
 

这里是HTML：

 ＆LT;标签=县＆GT;县：LT; /标签＆gt;
    ＆LT; D​​IV ID =countydiv＆GT;
        ＆LT;选择名称=县​​＆GT;
            ＆LT;选项＆GT;选择国家首先＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
    ＆LT; / DIV＆GT;
 

很容易。该脚本的工作原理，但前提是＆LT; D​​IV ID =countydiv＆GT; 就在那里。

我如何更改JavaScript来仍与标记，看起来像这样的工作？

 ＆LT;标签=县＆GT;县：LT; /标签＆gt;
    ＆LT;选择名称=县​​＆GT;
    ＆LT;选项＆GT;选择国家首先＆LT; /选项＆GT;
    ＆LT; /选择＆GT;
 

更新：也许我应该包括整个功能：

 函数getCounty（STATEID）{

    VAR strURL =？findCounty.php状态=+ STATEID;
    VAR REQ = getXMLHTTP（）;

    如果（REQ）{

            req.onreadystatechange =功能（）{
                    如果（req.readyState == 4）{
                            //只有当OK
                            如果（req.status == 200）{
                                    的document.getElementById（'countydiv）的innerHTML = req.responseText。
                            } 其他 {
                                    警报（有同时使用XMLHTTP是个问题：\ N+ req.statusText）;
                            }
                    }
            }
            req.open（GET，strURL，真正的）;
            req.send（空）;
    }
 

}

和标记：

 ＆LT; P＆GT;
        ＆LT;标签=状态→状态：其中; /标签＆gt;
        ＆LT;选择名称=状态的onChange =getCounty（THIS.VALUE）＆GT;
                ＆LT;选项＆GT;选择国家...＆LT; /选项＆GT;
                ＆LT;选项＆GT; 1＆LT; /选项＆GT;
                ＆LT;选项→2＆LT; /选项＆GT;
                ＆LT;选项＆GT;第3版; /选项＆GT;
        ＆LT; /选择＆GT;
＆所述; / P＆GT;

＆其中p为H.;
        ＆LT;标签=县＆GT;县：LT; /标签＆gt;
        ＆LT;选择名称=县​​＆GT;
                ＆LT;选项＆GT;选择国家首先＆LT; /选项＆GT;
        ＆LT; /选择＆GT;
＆所述; / P＆GT;
 

解决方案

我建议去jQuery的路线，使其更容易对自己的：

请参阅此链接的东西，应该引导你在正确的方向： <一href="http://stackoverflow.com/questions/47824/using-core-jquery-how-do-you-remove-all-the-options-of-a-select-box-then-add-on">http://stackoverflow.com/questions/47824/using-core-jquery-how-do-you-remove-all-the-options-of-a-select-box-then-add-on

此外，还有在IE6中的错误（如果你关心支持它）与动态填充选择元素，你应该知道的。 http://support.microsoft.com/kb/276228

I am using an ajax call to update a select menu. The ajax call puts the list into my select menu by running from a different .php file.

Here is the JS insertion snippet:

if (req.status == 200) {
        document.getElementById('countydiv').innerHTML=req.responseText;
} else {
        alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}

And here is the HTML:

    <label for="county">County:</label>
    <div id="countydiv">
        <select name="county">
            <option>Select State First</option>
        </select>
    </div>

Easy enough. The script works, but ONLY if the <div id="countydiv"> is in there.

How can I change the JavaScript to still work with markup that looks like this?

    <label for="county">County:</label>
    <select name="county">
    <option>Select State First</option>
    </select>

Update: Maybe I ought to include the whole function:

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);
    }

}

And the markup:

    <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>

解决方案

I would suggest going the jquery route to make it easier on yourself:

See this link for something that should lead you in the right direction: http://stackoverflow.com/questions/47824/using-core-jquery-how-do-you-remove-all-the-options-of-a-select-box-then-add-on

Also, there is a bug in IE6 (if you care about supporting it) with dynamically populating Select elements that you should be aware of. http://support.microsoft.com/kb/276228

这篇关于如何更新选择菜单与AJAX瓦特/＆LT; D​​IV＆GT;内部形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！