我想在这里创建一个链式列表。我希望用户在前4个下拉列表中选择一些内容,一旦选择了最后一个,则应该弹出另一个。我现在只是测试我的代码,由于某种原因,我的代码没有显示最后一个输入被更改时应该显示的下拉列表。
这是我的java脚本
function GetXmlHttpObject(){
var objXMLHttp = null;
if(window.XMLHttpRequest){
objXMLHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp;
}
function stateChanged(n){
if(xmlHttp.readyState == 4 || xmlHttp.readyState == "complete"){
alert(xmlHttp.responseText);
document.getElementById("yearSelect").innerHTML = xmlHttp.responseText;
}
}
function showTest(v,p,r){
alert("HI");
}
function showBoxes(v,p,r){
xmlHttp=GetXmlHttpObject();
url="";
if(v == 1){
//by year
xmlHttp.onreadystatechange=stateChanged("yearSelect");
url = 'result.php?sid=' + Math.random() + '&type=1&product=' + p + '&vendor=' + r;
}else if(v == 2){
xmlHttp.onreadystatechange=stateChanged("monthSelect");
url = 'result.php?sid=' + Math.random() + '&type=2&product=' + p + '&vendor=' + r;
//by month
}else if(v == 3){
xmlHttp.onreadystatechange=stateChanged("weekSelect");
url = 'result.php?sid=' + Math.random() + '&type=3&product=' + p + '&vendor=' + r;
// by week
}
//url.replace(" ","%20"); <-- Do I need to do this?
alert(url);
xmlHttp.open("GET",url,true);
xmlHttp.send();
}
这是我的结果.php。现在,它很简单,只返回选择标签。
<?php
?>
<select>
<option value=2001>2001</option>
</select>
<?php
?>
这是用户看到的第一件事。这里使用了一些像getClients()这样的php方法,只是把一些东西放在我的下拉中。
<html>
<head>
<title>LeadQual Reporting</title>
<script language="javascript" src="../lqcharts/fusioncharts_js/FusionCharts.js"></script>
<script language="javascript" src="ajax.js"></script>
</head>
<body>
<div>
<form method='post' action='result.php'>
<select name ='client'>
<?php
$clients = ChartData::getClients();
foreach($clients as $k){
echo "<option value='$k'>$k</option>";
}
?>
</select>
<br/>
<select name="products" id="productsResult">
<option>
<?php
$products = ChartData::getProducts();
foreach($products as $p){
echo "<option value='$p'>$p</option>";
}
?>
</option>
</select>
<br/>
<select name="vendors" id="vendorsResult">
<option>
<?php
$vendors = ChartData::getVendors();
foreach($vendors as $v){
echo "<option value='$v'>$v</option>";
}
?>
</option>
</select>
<br/>
<select name="view" id="chooseView" onchange="showBoxes(this.value, document.getElementById('productsResult').value, document.getElementById('vendorsResult').value)">
<option value=0>Select Option</option>
<option value=1>By Year</option>
<option value=2>By Month</option>
<option value=3>By Week</option>
</select>
<div id="yearSelect">
</div>
<div id="monthSelect">
</div>
<div id="weekSelect">
</div>
</form>
</div>
<div>
</div>
</body>
</html>
答案 0 :(得分:0)
我注意到你的2个选择列表中你有选项
<select name="vendors" id="vendorsResult">
<option>
<?php
$vendors = ChartData::getVendors();
foreach($vendors as $v){
echo "<option value='$v'>$v</option>";
}
?>
</option>
</select>
应该是:
<select name="vendors" id="vendorsResult">
<?php
$vendors = ChartData::getVendors();
foreach($vendors as $v){
echo "<option value='$v'>$v</option>";
}
?>
</select>
此外,我只是通过您的代码进行了快速扫描,我无法看到您针对您的ajax内容显示的div目标: - | 如果您使用Firefox的插件Firebug,您将看到您的ajax调用是否正常工作。
也是为了你的AJAX调用,为什么不使用JQuery,一个让你的代码看起来清晰,两个,你可以选择你想要的ajax内容出现的位置。