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>

现在我希望当用户选择其中每个隐藏在带有display:none;的css中的div时，例如当用户选择问题时，有问题ID的div可见或者当密码选择了具有密码id的div时变得可见我试试这个但不行：

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

那我怎么能这样做呢？

Answer 1

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

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

Demo Fiddle

Answer 2

这是Demo，为select用户可以选择选项

<强>的jsfiddle

http://jsfiddle.net/adarshkr/z9gcf40r/2/

<强>代码

<强> HTML

<select id="showdiv">
    <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>

<div id="question" class="hide">
    <p>question</p>
</div>

<div id="password" class="hide">
    <p>password</p>
</div>

<div id="email" class="hide">
    <p>email</p>
</div>

<div id="none" class="hide">
    <p>none</p>
</div>

<强> CSS

.hide{
    display:none
}

<强> JAVASCRIPT

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

Answer 3

比文本更好地检查价值。

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

Answer 4

试试这个，

$('#auth').on('change', function() {
    var that = $(this).val();
    if (that  ===  "question"){
        $("#question").css("display","block");
    }
});

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

4 个答案: