我在下面的代码将更改国家/地区列表时更改状态下拉列表.
如果选择国家/地区ID号234和224,如何更改状态列表?
如果选择了另一个国家/地区,则应将其更改为此文本输入框
如果选择国家/地区ID号234和224,如何更改状态列表?
如果选择了另一个国家/地区,则应将其更改为此文本输入框
<input type="text" name="othstate" value="" class="textBox">
表格
<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>
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>
解决方法
只需在执行AJAX请求之前检查countryId值,并仅在countryId处于允许范围内时执行请求.在countryId不匹配的情况下,我会隐藏选择(也可能清除它的值)并显示之前隐藏的已存在的输入.如果选择允许的国家,则应该采取相反的做法.
jQuery示例如下:
<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(); } }); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。