使用Ajax填充下拉列表

-1

总的noob to ajax在这里，我与这个语法有多接近？我希望第二个下拉框依赖于第一个下拉框。我知道这不是解决这个问题最简单的方法，所以任何帮助都是值得赞赏的。 acura.txt是一个带有标记的文本文件，用于创建另一个下拉列表。谢谢大家的帮助！使用Ajax填充下拉列表

的JavaScript：

function loadXMLDoc() { 
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
    } else { // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("acura").innerHTML = xmlhttp.responseText; 
     } 
    } 
    xmlhttp.open("GET", "acura.txt", true); 
    xmlhttp.send(); 
}

HTML：

<select id="stateinjured"> 
    <option selected="selected">Select your state</option> 
    <option id="acura" onClick="loadMXLDOC">Acura</option> 
    <option id="bmw">BMW</option> 
    <option id="audi">Audi</option> 
    <option id="benz">Benz</option> 
</select>

来源

2010-12-14 braveowl

你有没有考虑过使用像jQuery这样的ajax框架，或者仅仅是为了你自己的知识？ – 2010-12-14 14:57:09

远离你用jquery标记它...... – 2010-12-14 14:57:43

你已经将它标记为jquery，但是“尽管我可以看到，似乎没有使用它”。如果你想要一个jQuery的方式来做到这一点，那么有更好的方法（它建立在Ajax调用的很好的语法）。如果你想坚持使用非jQuery，那么你可能想要拿走那个标签。 :) – Chris 2010-12-14 14:59:58

它行不通饱食一顿<select>标签（拥有自己<option>内容，大概）到的内容<option>标记。这就是你的代码现在要做的事情。

这这里代码：

if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("acura").innerHTML=xmlhttp.responseText; 
    }

的元素，它的“ID”值“讴歌”是<select>页面上的<option>标签之一。因此，如果回复文字只是<select>，它将会出现在错误的地方。

也许你只是想要在页面上的另一个<span>或什么;这取决于它看起来应该是什么样子。

另一件事：你不想在<option>上拿起“点击”事件。可以选择一个选项（由用户），而不发生任何“点击”。可能您应该跟踪<select>标记上的“更改”事件，并检查处理程序中的值。

来源

2010-12-14 15:00:23 Pointy

页面的外观对我来说现在并不重要，我只是想弄清楚什么是正确的代码，然后从那里:)。我真正需要它做的是选择其中一个状态并用文本文件填充它。我会删除选择标签，谢谢。 – braveowl 2010-12-14 15:05:33

嗯..不太确定你的意思，（对不起< - noob）。你能解释一下好吗？ – braveowl 2010-12-14 15:09:06

Pointy突出显示了过于分离的问题。首先，您需要将新选择菜单插入到第一个选择菜单之外的其他容器中，例如与其相邻的div。其次，在选择标签中使用onChange事件处理程序，而不是在选项标签中使用onClick事件处理程序，以便使用鼠标或键盘选择菜单项时调用该函数。当onChange中的函数被调用时，检查所选选项的值是否应该创建第二个下拉列表。 – jonesbp 2010-12-14 15:19:54

使用Ajax填充下拉列表

回答

相关问题