jquery - 表单域切换

Question

我正在构建一个表单，我需要根据所选国家/地区专门切换两个表单域。一个是美国各州的选择下拉菜单，一个是省的输入字段。它们是并排构建的，并且在任何时候将国家/地区更改为比如说非洲，输入字段就会变得可见。And when the country United States is selected the States select drop down appears. 下面是一个简单的 HTML 示例。

<ul>
 <li><label>Country</label><select name="country"></li>
 <li><label>State/Province</label><select name="state"><input name="state"></li>
</ul>

到目前为止，这是我的 jquery。

$("#billing_info select[name='state']").css('display', 'none');
$("#billing_info input[name='state']").css('display', 'none');
$("#billing_info select[name='country_code']").change(function () {
    if ($("select[name='country_code']") == "USA") {
        $("select[name='state']").css('display', 'visible');
        $("input[name='state']").prop('disabled', false);
    }
    else {
        $("input[name='state']").css('display', 'visible');
        $("select[name='state']").prop('disabled', false);
    }
});

我很难让它真正起作用。我需要添加什么才能使此功能正常工作并接受页面已加载的实时更改？

Answer 1

给你... http://jsfiddle.net/yeyene/zNZKa/

HTML

<ul>
 <li>
     <label>Country</label>
     <select id="country">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
 </li>
 <li id="billing_info" style="display:none;"><label>State/Province</label><select name="state"><input name="state"></li>
</ul>

CSS

li {list-style:none;display:inline;}

查询

$(document).ready(function() {
    $('#country').change(function() {
        $('#billing_info').show();
    });
}); 

Answer 2

没有display : visible，改变

$("select[name='state']").css('display', 'visible');

至

$("select[name='state']").show()

或使用display: block或任何其他有效的显示属性，并且您意识到您总是禁用select名称state？

Answer 3

您可以使用show()和hide()切换可见元素，如下所示...

// initially hide both elements
$("#billing_info select[name='state']").hide();
$("#billing_info input[name='state']").hide();

// toggle the visibility of the elements when a country is selected
$("#billing_info select[name='country_code']").change(function () {
    if ($("select[name='country_code']") == "USA") {
        $("select[name='state']").show();
        $("input[name='state']").hide();
    }
    else {
        $("input[name='state']").show();
        $("select[name='state']").hide();
    }
});