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

时间:2014-09-09 09:24:51

标签: javascript jquery html css

我有这个代码:

<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");
    }
});

那我怎么能这样做呢?

4 个答案:

答案 0 :(得分:2)

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

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

Demo Fiddle

答案 1 :(得分:1)

这是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();
});

答案 2 :(得分:0)

比文本更好地检查价值。

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

答案 3 :(得分:0)

试试这个,

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