表格字段切换

Question

我正在构建一个表单，我需要根据所选的国家/地区专门切换出两个表单字段。美国各州的选择下拉列表和省的输入字段。它们是并排建造的，当国家在任何时候被改为让非洲时，输入区域变得可见。并且当选择国家美国时，出现选择下拉状态。下面是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

没有display : visible，更改

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

到

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

或使用display: block或任何其他有效的显示属性，您发现自己始终禁用名为select的{​​{1}}？

Answer 2

您可以使用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();
    }
});

Answer 3

你去...... 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;}

JQUERY

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