当国家/地区已保存时jquery国家/地区选择？

Question

我对下面的 jquery 代码有疑问。如果您能帮忙，请给我建议或代码

因此，我有一个国家/地区下拉列表、美国的州下拉列表以及非美国用户的州输入字段。

当您从国家/地区列表中选择美国时，它会隐藏其他州字段，当您选择美国以外的任何国家/地区时，它会隐藏美国州列表并显示输入字段

到目前为止一切顺利，现在问题就来了，这段代码非常适合注册表单，但不适用于编辑用户位置。

当用户在访问编辑页面时已经将这些数据保存在 mysql/php 中时，它将无法正常工作。我想的第一个解决方案是拥有2个javascript函数并使用PHP根据所在国家/地区解析正确的函数，如果他们有其他国家/地区然后保存了美国，则可以处理问题，它将加载选择的英格兰示例，但会显示美国状态而不是状态输入字段等等。

但仍有 1 个主要问题。如果您选择非美国国家/地区，则会出现其他州输入框，然后您可以输入数据，现在假设我执行了此操作并输入了一些数据，然后从国家/地区列表中选择了美国，它将隐藏我输入的数据让我选择一个州。

问题出在 PHP 后端，我检查文本输入是否为空或状态是否为空，这个缺陷将允许两者保存数据。

我希望这是有道理的，我希望得到您的意见并提供帮助

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
   locationlist();
});

function locationlist() {
    $('#othstate').hide();
    $('#country').change( function() {         
        var val = $(this).val();
     if (val == 223) {
         $('#state').val('').show();
         $('#othstate').hide();
     }else {
        $('#state').val('').hide();
        $('#othstate').show();
     }
   });
 }
</script>

<form method="post" name="form1">
   <select style="background-color: #ffffa0" name="country" id="country">
      <option>Select Country</option>
      <option value="223" selected="selected">USA</option>
      <option value="224">Canada</option>
      <option value="225">England</option>
      <option value="226">Ireland</option>
   </select>
<div id="state">
   <select style="background-color: #ffffa0" name="state" id="state">
      <option>Select State</option>
      <option value="1">Florida</option>
      <option value="2">New York</option>
      <option value="3" selected="selected">Georgia</option>
      <option value="4">California</option>
   </select>
</div>
<div id="othstate"><input type="text" name="othstate" id="othstate" value="" class="textBox"></div>

Answer 1

不要只是隐藏输入/选择，而是禁用它。这将阻止值表单被发布到您的服务器。

function locationlist() {
    $('#othstate').hide().attr("disabled", "disabled");
    $('#country').change( function() {         
        var val = $(this).val();
        if (val == 223) {
         $('#state').val('').show().removeAttr("disabled");
             $('#othstate').hide().attr("disabled", "disabled");
        }else {
            $('#state').val('').hide().attr("disabled", "disabled");
            $('#othstate').show().removeAttr("disabled");
        }
    });
}