问题描述
我有以下的code将更改状态下拉列表中,当你改变国家名单。
我怎样才能使它改变国家名单只有当国家的ID号码234和224被选中?
如果另一个国家选择应该是改变这个文本输入框
<输入类型=文本名称=othstate值=级=textBox中>
的形式
<形式方法=邮报名称=Form1的>
<选择风格=背景颜色:#ffffa0NAME =国家的onchange =的getState(THIS.VALUE)>
<选项>选择国家< /选项>
<期权价值=223>美国< /选项>
<期权价值=224>加拿大和LT; /选项>
<期权价值=225>英格兰和LT; /选项>
<期权价值=226>爱尔兰< /选项>
< /选择>
<选择风格=背景颜色:#ffffa0NAME =状态>
<选项>选择国家首先< /选项>
< /选择>
中的JavaScript
<脚本>
功能的getState(countryId)
{
VAR strURL =findState.php国家=?+ countryId;
VAR REQ = getXMLHTTP();
如果(REQ)
{
req.onreadystatechange =功能()
{
如果(req.readyState == 4)
{
//只有当OK
如果(req.status == 200)
{
的document.getElementById('statediv)的innerHTML = req.responseText。
} 其他 {
警报(有同时使用XMLHTTP是个问题:\ N+ req.statusText);
}
}
}
req.open(GET,strURL,真正的);
req.send(空);
}
}
< / SCRIPT>
只需选中countryId值,你做AJAX请求之前,只执行请求,如果countryId是在允许范围内。另外,在countryId不匹配的情况下,我会隐藏选择(大概清楚它的价值,太),并显示一个已有的投入,这是previously隐藏。如果可允许的国家选择反向应做
下面的jQuery例如:
<形式方法=邮报名称=Form1的>
<选择风格=背景颜色:#ffffa0NAME =国家的onchange =的getState(THIS.VALUE)>
<选项>选择国家< /选项>
<期权价值=223>美国< /选项>
<期权价值=224>加拿大和LT; /选项>
<期权价值=225>英格兰和LT; /选项>
<期权价值=226>爱尔兰< /选项>
< /选择>
<选择风格=背景颜色:#ffffa0NAME =状态>
<选项>选择国家首先< /选项>
< /选择>
<输入类型=文本名称=othstate值=级=textBox中的风格=显示:无;>
< /形式GT;
$(函数(){
$('#国)。改变(函数(){
VAR VAL = $(本).VAL();
如果(VAL == 223 || VAL == 224){
$('#othstate)VAL('')隐藏()。
$阿贾克斯({
网址:findState.php,
数据类型:HTML,
数据:{国家:VAL},
成功:功能(数据){
$('#国家)HTML(数据);
}
});
}
其他 {
$('#国家)VAL('')隐藏()。
$('#othstate)显示()。
}
});
});
I have the code below that will change a state dropdown list when you change the country list.
How can I make it change the state list ONLY when country ID number 234 and 224 are selected?
If another country is selected it should be change into this text input box
<input type="text" name="othstate" value="" class="textBox">
The form
<form method="post" name="form1">
<select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">
<option>Select Country</option>
<option value="223">USA</option>
<option value="224">Canada</option>
<option value="225">England</option>
<option value="226">Ireland</option>
</select>
<select style="background-color: #ffffa0" name="state">
<option>Select Country First</option>
</select>
The javascript
<script>
function getState(countryId)
{
var strURL="findState.php?country="+countryId;
var req = getXMLHTTP();
if (req)
{
req.onreadystatechange = function()
{
if (req.readyState == 4)
{
// only if "OK"
if (req.status == 200)
{
document.getElementById('statediv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
</script>
Just check the countryId value before you do the AJAX request and only perform the request if the countryId is in the allowable range. In the case where the countryId doesn't match, I would hide the select (probably clear it's value, too) and show an already existing input that was previously hidden. The reverse should be done if an allowable country is chosen.
jQuery example below:
<form method="post" name="form1">
<select style="background-color: #ffffa0" name="country" onchange="getState(this.value)">
<option>Select Country</option>
<option value="223">USA</option>
<option value="224">Canada</option>
<option value="225">England</option>
<option value="226">Ireland</option>
</select>
<select style="background-color: #ffffa0" name="state">
<option>Select Country First</option>
</select>
<input type="text" name="othstate" value="" class="textBox" style="display: none;">
</form>
$(function() {
$('#country').change( function() {
var val = $(this).val();
if (val == 223 || val == 224) {
$('#othstate').val('').hide();
$.ajax({
url: 'findState.php',
dataType: 'html',
data: { country : val },
success: function(data) {
$('#state').html( data );
}
});
}
else {
$('#state').val('').hide();
$('#othstate').show();
}
});
});
这篇关于如何使用AJAX来填充这取决于国家列表状态列表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!