我有一个表格，其中列出了印度各州和城市的列表。选择其中一个州后，该州的城市将显示在<select>中，以显示城市。我正在使用托管在某个地方的php脚本（类似的网站），我认为它可以解决我的目的。脚本将Stateoptions的value作为参数，并返回一个带有相应城市的<select>。
脚本是http://www.indane.co.in/state.php?stateid=2196，其中2196是所选状态的ID/值。
我需要在我的城市中显示这方面的内容。
请建议我怎么做。
到目前为止，我已经尝试过了，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript">
function showcat(id,ss,type)
{
var cid=id.value;
if(type=='state')
{
document.getElementById("state_loading").style.visibility="visible";
var response = httpGet("http://www.indane.co.in/state.php?stateid="+cid);
var id=document.getElementById('bgcity');
id.innerHTML=response;
}
}
function httpGet(theUrl)
{
var xHRObject = new XMLHttpRequest();
var url = theUrl;
xHRObject.open("GET", url, true);
xHRObject.send();
xHRObject.onreadystatechange = function () {
if (xHRObject.readyState==4 && xHRObject.status==200) {
var response = xHRObject.responseText;
return response;
}
}
}
</script>
</head>
<body>
<select name="bgstate" id="bgstate" style="width:200px" onChange="showcat(this,'sub1','state');">
<option value="">[ SELECT STATE ]</option>
<option value="2169" >Andhra Pradesh</option>
<option value="2196" >Arunachal Pradesh</option>
<option value="2170" >Assam</option>
<option value="2171" >Bihar</option>
<option value="5267" >Chhattisgarh</option>
<option value="2174" >Delhi</option>
<option value="2199" >Goa</option>
<option value="2175" >Gujarat</option>
<option value="2176" >Haryana</option>
<option value="2177" >Himachal Pradesh</option>
<option value="2178" >Jammu and Kashmir</option>
<option value="5268" >Jharkhand</option>
<option value="2185" >Karnataka</option>
<option value="2179" >Kerala</option>
<option value="2181" >Madhya Pradesh</option>
<option value="2182" >Maharashtra</option>
<option value="2183" >Manipur</option>
<option value="2184" >Meghalaya</option>
<option value="2197" >Mizoram</option>
<option value="2186" >Nagaland</option>
<option value="2187" >Orissa</option>
<option value="2189" >Punjab</option>
<option value="2190" >Rajasthan</option>
<option value="2195" >Sikkim</option>
<option value="2191" >Tamil Nadu</option>
<option value="2192" >Tripura</option>
<option value="5269" >UNION TERRITORY</option>
<option value="2193" >Uttar Pradesh</option>
<option value="5259" >Uttaranchal</option>
<option value="2194" >West Bengal</option>
</select>
<span id="state_loading" style="visibility:hidden;"><img src="http://www.indane.co.in/images/ajax_small_load.gif" /></span>
</td>
</tr>
<br/>
<tr valign="top">
<td> </td>
<td height="25" >City <span class="error">*</span></td>
<td colspan="2">
<span id="sub1">
<select name="bgcity" style="width:200px" id="bgcity" >
<option value="">[SELECT CITY]</option>
</select>
</span>
<span id="city_loading" style="visibility:hidden;"><img src="http://www.indane.co.in/images/ajax_small_load.gif" /></span>
<input type="button" value="Search" onClick="showcat(document.getElementById('bgcity'),'sub2','city');" style="cursor:pointer;" />
</tr>
</body>
</html>
问题1-问题是城市下拉列表的URL返回了一个选择框，而您正在用另一个选择盒替换页面中选择框的选项
另一个问题是访问控制允许原始标头。
用以下替换页面中的城市下拉菜单
<span id="bgcity">
<select name="bgcity" style="width:200px" >
<option value="">[SELECT CITY]</option>
</select>
</span>
将您的showcat更改为
function showcat(id,ss,type)
{
var cid=id.value;
if(type=='state')
{
document.getElementById("state_loading").style.visibility="visible";
var response = httpGet("http://www.indane.co.in/state.php?stateid="+cid);
if(response !== undefined)
{
var id=document.getElementById('bgcity');
id.innerHTML=response;
}
}
}
我已经将与选择框关联的id删除到跨度中，以便它替换整个下拉列表。。并删除showcat函数中的第二个参数，因为此更改将导致错误。。。