javascript - 如果使用 jQuery 选择了一个选项，则更改 CSS 属性

Question

我有这个代码:

<select>
    <option disabled selected>Select Method</option>
    <option value="question">Question</option>
    <option value="password">Password</option>
    <option value="email">Email</option>
    <option value="none">None</option>
</select>

现在我希望当用户选择它们中的每一个时，一些隐藏在 css 中的 div 与 display:none; 变得可见，例如当用户选择问题时，具有问题 id 的 div 变得可见或选择密码时具有密码 ID 的 div 可见。
我尝试了这个但没有用:

$(document).ready(function(){
    if ($("#auth option:selected").text() ==  "question"){
        $("#question").css("display","block");
    }
});

那我该怎么做呢？

Answer 1

如果您遵循到目前为止所做的模式，则必须为每个选项编写代码。如果你的 options 和 div 元素与 value 和 id 耦合，你可以简单地这样做，

$("select").change(function() {
    $("div").hide();
    $("#" + $(this).val()).show();
});

Demo Fiddle