Question

我想这样做，如果从下拉列表状态列表中选择美国，如果选择了加拿大，那么省列表会显示。怎么办呢？

<select name="country">
    <option value="US">United States</option>
    <option value="CA">Canada</option>
</select>

<select name="state">
    <option value="1">State 1</option>
    <option value="2">State 2</option>
    <option value="3">State 3</option>
</select>

<select name="province">
    <option value="1">Province 1</option>
    <option value="2">Province 2</option>
    <option value="3">Province 3</option>
</select>

Answer 1

如果您正在使用JQuery，我建议您查看“更改”事件，并结合“show”和“hide”功能。

我不会为你编写所有代码，但会产生一些影响;

$("#country").change(function()
{
    // get value of "country"
    // if it's 'US';
    $("#state").show();
    // otherwise
    $("#province").show();
});

在元素上使用id而不是“name”属性通常也更好。这样可以非常快速地查找元素，这是散列选择器工作的唯一方法。（“＃国家”）。如果您需要使用“name”属性，您的选择器可能看起来像

$("select[name=\"country\"]")

Answer 2

你可以这样做：

$('select[name="country"]').change(function() {
    var val = this.value;
    if(val == "US") { 
        $('select[name="state"]').show().siblings('select[name="province"]').hide();
    } else { 
        $('select[name="province"]').show().siblings('select[name="state"]').hide();
    }
}).change();

<强> Fiddle Demo

Answer 3

你可以在普通的javascript中使用display：none隐藏<select>，然后使用onChange中的if语句为主<select>公开它们。

<select name="country" onchange="if (this.value == 'CA') {    document.getElementById('state').style.display=''; } else { document.getElementById('province').style.display=''; };">

以下是一个有效的例子：http://jsfiddle.net/u7NpP/

根据所选内容显示不同的选项

3 个答案: