我有这个代码:
<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");
}
});
那我怎么能这样做呢?
答案 0 :(得分:2)
如果您遵循目前所做的模式,则必须为每个选项编写代码。如果你的选项和div元素与value和id结合,你可以这样做,
$("select").change(function() {
$("div").hide();
$("#" + $(this).val()).show();
});
答案 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");
}
});