php - 帮助 jquery 国家/州列表

Question

是否有更好的方法来执行此 jquery 代码？

目前我必须使用PHP来插入jquery代码的起始位置。
该代码用于国家/州列表。

如果用户选择美国，则其下方会出现一个州下拉列表，如果选择任何其他国家/地区，则会显示不同的文本输入框并隐藏下拉列表。

现在，如果用户已经将一个国家/地区保存到数据库中，并且他们在页面上编辑该值，那么我必须使用 PHP 来显示应该首先显示哪个国家/地区，要么是美国州，要么是州输入。

当用户注册时，默认情况下，仅当用户选择非美国国家/地区且州列表更改为州输入时，才会显示美国州列表。

希望我说得有道理。最终目标是以某种方式使其完全 javascript/jquery 并且不依赖 PHP 来设置任何内容

country dropdown list
<select name="country" id="country" class="textarealong  signup_good"/>
<option value=1001>Choose a Country</option>
<option value=238>Zimbabwe</option>
...
</select>

USA state dropdown list
<select name="usstate" id="usstate" class="textarealong  signup_good"/>
<option value=1001>Choose a State</option>
<option value=238>Florida</option>
...
</select>

NON-USA state INPUT box
<input type="text" id="othstate" name="othstate" id="othstate" value="" class="textarealong  signup_good" maxlength="100">


<?PHP
//fix jquery country/state list based on there current saved country/state
if($_SESSION['member_info']['country'] == 224){
    //$jquerycountry = "$('#othstate').hide().attr(\"disabled\", \"disabled\");";
    $jquerycountry = "$('#othstate').hide().val('');";
}else{
    $jquerycountry = "$('#usstate').hide().attr(\"disabled\", \"disabled\");";
}
?>
<script>
$(document).ready(function() {
    locationlist();
});

function locationlist() {
    <?PHP echo $jquerycountry; // includes country jquery code from above ?>
    $('#country').change(function () {
        var val = $(this).val();
        if (val == 224) {
            $('#usstate').val('').show().removeAttr("disabled");
            $('#othstate').hide().val('');
        } else {
            $('#usstate').val('').hide().attr("disabled", "disabled");
            $('#othstate').show().removeAttr("disabled");
        }
    });
}
</script>

Answer 1

也许这对您来说可能是一个很好的解决方案:

HTML 选择和输入字段:

<select name="country" id="country" class="textarealong  signup_good"/>
  <option value=1001>Choose a Country</option>
  <option value=238>Zimbabwe</option>
  <option value=239>Rwanda</option>  
</select>

USA state dropdown list
<select name="usstate" id="usstate" class="textarealong  signup_good"/>
  <option value=1001>Choose a State</option>
  <option value=238>Florida</option>
</select>

<input id="otherstate"/>

然后 jQuery 部分具有一些“准备就绪”的魔力:隐藏 otherstate 字段并在加载时触发更改事件，就像 Greg 提到的那样。这可以确保，如果在页面加载时已经选择了一个国家/地区，则将选择正确的表单字段:

<script type="text/javascript">
  $(document).ready(function () {
    $("#otherstate").hide();
    $("#country").trigger("change");
  });

  $("#country").change(function () {
    if ($("#country").val() != '1001') {
      $("#usstate").hide();
      $("#otherstate").show();
    } else {
      $("#usstate").show();
      $("#otherstate").hide();    
    }
  });
</script>

希望这对您有帮助! ;)