jQuery选择更改显示/隐藏div事件 [英] jQuery select change show/hide div event
本文介绍了jQuery选择更改显示/隐藏div事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图创建一个表单，当选择元素'parcel'被选中时，它将显示一个div，但是当它没有被选中时，我想隐藏div。这是我目前的标记：
这是我的HTML到目前为止。
< div class =row>
键入
< option ame =l_lettervalue =l_letter>大写字母< / option>
< option name =lettervalue =letter> Letter< / option>
< option name =parcelvalue =parcel> Parcel< / option>
< / select>
< / div>
< div class =rowid =row_dim>
维度
< input type =textname =lengthstyle =margin-left：12px; class =dimensionplaceholder =长度>
< input type =textname =widthclass =dimensionplaceholder =Width>
< input type =textname =heightclass =dimensionplaceholder =Height>
< / div>
这是我的jQuery到目前为止。
< $（$＃$）$（$＃$ $ $ $''$'$'$'$'$'$'$' ;
$（select [@ name ='parcel']：checked）。val（）=='parcel'）。show（）;
}）;
}）;
解决方案
使用以下JQuery。 演示
$（$（'＃type'）。$（$（$'$'$'$'$'$'$'$'$''$'$' #type'）。val（）=='parcel'）{
$（'＃row_dim'）。show（）;
} else {
$（'＃row_dim'）。 hide（）;
}
}）;
}）;
I am trying to create a form which when the select element 'parcel' is selected it will show a div but when it is not selected I would like to hide the div. Here is my markup at the moment:
This is my HTML so far..
<div class="row">
Type
<select name="type" id="type" style="margin-left:57px; width:153px;">
<option ame="l_letter" value="l_letter">Large Letter</option>
<option name="letter" value="letter">Letter</option>
<option name="parcel" value="parcel">Parcel</option>
</select>
</div>
<div class="row" id="row_dim">
Dimensions
<input type="text" name="length" style="margin-left:12px;" class="dimension" placeholder="Length">
<input type="text" name="width" class="dimension" placeholder="Width">
<input type="text" name="height" class="dimension" placeholder="Height">
</div>
This is my jQuery so far..
$(function() {
$('#type').change(function(){
$('#row_dim').hide();
$("select[@name='parcel']:checked").val() == 'parcel').show();
});
});
解决方案
Use following JQuery. Demo
$(function() {
$('#row_dim').hide();
$('#type').change(function(){
if($('#type').val() == 'parcel') {
$('#row_dim').show();
} else {
$('#row_dim').hide();
}
});
});
这篇关于jQuery选择更改显示/隐藏div事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
