根据AJAX响应更改下拉值
我对AJAX不太熟练,但我认为这应该起作用。 它应该做的是用户从下拉列表中选择一个名称,而另一个下拉列表(使用PHP从MySQL数据库填充)自动选择关联的对象。因此,让我们说你有:根据AJAX响应更改下拉值
名称:苏西/迈克尔/卡伦
最喜欢的水果:苹果/橙/芒果/番石榴
选择苏西,它会自动选择“橙色”,因为这是她的最爱在数据库中结果。
我已经得到了Ajax代码,将下拉菜单改为关联的“水果”。
<script type="text/javascript">
function getAff(str)
{
if (str=="NULL" || str=="")
{
document.getElementById("fruit").value="";
return;
}
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)
{
alert(xmlhttp.responseText);
var indexVal = document.getElementById("fruit").length;
for(x=0; x<indexVal;x++) {
if (document.getElementById("fruit").options[x].value == xmlhttp.responseText) {
document.getElementById("fruit").selectedIndex = x;
//alert(xmlhttp.responseText);
}
}
}
}
xmlhttp.open("GET","getaff.php?q="+str,true);
xmlhttp.send();
}
</script>
我已经通过警报确认它拉动了正确的值,尽管我已经评论过这里。
一个问题是,下拉框不会改变。我不知道这是因为它是通过PHP生成的?不过,它不应该是。每个下拉选择的值是从数据库中提取的水果的名称。我也提醒自己indexvalue的数量,看看它是否读取下拉,我得到正确的数字。但是没有改变下拉。有什么想法吗?谢谢!
尝试在<选项>标签设置选择的值,而不是<选择>,并从响应修剪空白:
if (document.getElementById("fruit").options[x].value == xmlhttp.responseText.trim()) {
document.getElementById("fruit").options[x].selected = "selected";
}
谢谢!那就是诀窍。我很感激!下一次,虽然我想我会研究jQuery;) – Sara 2011-02-01 21:16:17
有几件事情尝试:
您比较值,或
innerHTML
?您是否确定价值(或
innerHTML
)与您的回应相匹配?
我不是很精通AJAX但 所有帐户,我认为这应该是 工作
如果您对javascript不熟悉,我认为您不应该写作普通的javascript(很难)。使用一个像jquery这样的框架非常受欢迎,它使这些平凡的任务变得简单易行。
什么它应该做的是用户 从下拉列表中选择一个名字,并 另一个下拉菜单(从 MySQL数据库和PHP填充)自动 选择关联的对象。
你应该看看以下几个部分:
- How Jquery works:让你开始。
- s elect():将事件处理程序绑定到“选择”JavaScript事件,或在元素上触发该事件。
.load::从服务器加载数据并将返回的HTML放入匹配的元素中。
Jquery.get/jQuery.getJSON():使用HTTP GET请求从服务器加载数据/使用GET HTTP请求从服务器加载JSON编码的数据。
- Jquery.post:使用HTTP POST请求从服务器加载数据。
当您阅读/浏览这些部分时,您应该可以毫不费力地写出这些内容(再加上更多感谢令人难以置信的John Resig)。
它是一个警察,所以我会发布它作为评论,而不是一个答案。如果你使用jQuery,你的生活将会变得如此简单。 – profitphp 2011-02-01 04:53:37