根据多选选择显示/隐藏下拉列表
Show/hide dropdown based on Multiselect selection
我有以下 HTML。
<select id="segment_c" name="segment_c[]" multiple="true" size="6" style="width:150" title="" tabindex="0">
<option label="" value="" selected="selected"></option>
<option label="Mobile1" value="Mobile1">Mobile1</option>
<option label="Mobile2" value="Mobile2">Mobile2</option>
<option label="Mobile3" value="Mobile3">Mobile3</option>
</select>
<select name="Mobile1_c" id="Mobile1_c" title="">
<option label="" value=""></option>
<option label="Samsung" value="Samsung">Samsung</option>
<option label="Nokia" value="Nokia">Nokia</option>
</select>
<select name="Mobile2_c" id="Mobile2_c" title="">
<option label="" value="" selected="selected"></option>
<option label="Samsung" value="Samsung">Samsung</option>
<option label="Nokia" value="Nokia">Nokia</option>
</select>
<select name="Mobile3_c" id="Mobile3_c" title="">
<option label="" value=""></option>
<option label="Motorola" value="Motorola">Motorola</option>
<option label="Nokia" value="Nokia">Nokia</option>
</select>
这是一个多选列表
我需要以下jQuery的帮助。
我想迭代multiselect (id="segment_c")
,如果选择了value="Mobile1"
和value="Mobile2"
和value="Mobile3"
,则显示带有id="Mobile1_c"
和id="Mobile2_c"
和id="Mobile3"
的下拉列表
基本上根据在多选中选择的值显示/隐藏下拉列表。
提前谢谢。
John
请注意,来自多选的值存储在数组中。
$(document).ready(function () {
function hideAll() {
$('#Mobile1_c,#Mobile2_c, #Mobile3_c').hide();
}
hideAll();
$('#segment_c').change(function() {
hideAll();
var val = $(this).val();
if (val == "") {
hideAll();
} else {
for (var i = 0; i <= val.length; i++) {
$('select[name*="' + val[i] + '"]').show();
}
}
});
});
http://jsfiddle.net/4nuAW/2/
@Freak_Droid几乎拥有它,但由于缺乏代表,我无法发表评论。
使用该实现,您不需要按照要求选择所有三个
$('#Mobile1_c,#Mobile2_c, #Mobile3_c').toggle();
$('#segment_c').change(function(){
//val returns an array not a jquery object so dont prefix with a $
var val = $(this).val();
//you may want a more robust check here
if(val.length === 3){
$('#Mobile3_c').show();
}else{
$('#Mobile3_c').hide();
}
});
http://jsfiddle.net/VuN78/1
相关文章:
- 如何使用javascript将值引导下拉列表设置为隐藏值asp.net
- 当链接单击-jQuery时,第二层下拉列表将隐藏
- 使用2个下拉列表显示/隐藏分区
- 选中复选框时如何显示/隐藏下拉列表
- HTML 表单字段根据从下拉列表中选择的选项显示/隐藏
- 删除或隐藏下拉列表中的一些值,该列表由使用JavaScript的存储过程填充
- jQuery 根据数组值隐藏下拉列表的选项
- 使用 jQuery 隐藏下拉列表,但它失败了
- 当存在粘性标头时隐藏下拉列表“插入符号”
- j查询页面加载时如何隐藏下拉列表
- 根据一个子jQuery单独隐藏下拉列表
- Javascript显示隐藏下拉列表;我工作不好
- 单击任意位置时,javascript隐藏下拉列表
- asp.net使用javascript隐藏下拉列表中的特定项目
- 单击菜单以外的任何位置时,jQuery都会隐藏下拉列表
- 如何在页面加载时隐藏下拉列表
- Jquery隐藏下拉列表不工作
- 试图在主干网中隐藏下拉列表出错
- 如何在选择框中隐藏下拉列表
- 根据多选选择显示/隐藏下拉列表