帮助 jquery 国家/州列表答案

【问题标题】：Help with a jquery country/state list帮助 jquery 国家/州列表
【发布时间】：2009-09-04 21:03:34
【问题描述】：

有没有更好的方法来做这个 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>

【问题讨论】：

标签： php jquery list

【解决方案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>

希望对您有所帮助！ ;)

【讨论】：

这是一个很好的开始，似乎有效，唯一的问题是当我从带有下拉列表的国家更改为文本输入时，它应该隐藏下拉列表
我看到你有 $("#otherstate").hide();在那里，但它似乎不起作用
听起来.hide() 方法不能正常工作。使用 jQuery 1.3.2 min 在我的本地版本中完美运行 - 隐藏下拉列表以及隐藏文本输入字段。

【解决方案2】：

您可以在ready() 中执行此操作吗？

loctionlist();
$('#country').trigger('change');

【讨论】：

【解决方案3】：

（完全从另一个角度来看：）

有了您在此处描述的所有选项/可能性，明智的做法是废弃所有下拉菜单并仅使用自动完成文本字段。

【讨论】：