[英]jquery show hide div based on select value dynamically
I have a project I am working on that needs to show/hide a division dependent on a selection. 我有一个正在处理的项目,需要显示/隐藏一个依赖于选择的分区。 I need that in selecting hiding divas of my desired group.
在选择我想要的小组的隐藏女主角时,我需要这样做。 Initially, the number and amount of do not know!
最初,数量和金额不知道! Currently it works for #selectField_1 and box_1.
目前,它适用于#selectField_1和box_1。 But I do not want to do a static script I want to make it dynamic
但是我不想做一个静态脚本,我想让它动态
<script>
$(document).ready(function (value) {
$('.box_1').hide();
$('#51').show(); <==================Need Selected value from <select> as Default
$('#selectField_1').change(function () {
$('.box_1').hide();
$('#'+$(this).val()).show();
});
});
</script>
<select id="selectField_1">
<option value="51" selected>option1</option>
<option value="52">option2</option>
<option value="53">option3</option>
<option value="54">option4</option>
</select>
<select id="selectField_2">
<option value="55" selected>option1</option>
<option value="56">option2</option>
<option value="57">option3</option>
<option value="58">option4</option>
</select>
.......................................
<select id="selectField_n">
<option value="n" selected>option1</option>
<option value="n">option2</option>
<option value="n">option3</option>
<option value="n">option4</option>
</select>
</br>
<div id="51" class="box_1">Content 51</div>
<div id="52" class="box_1">Content 52</div>
<div id="53" class="box_1">Content 53</div>
<div id="54" class="box_1">Content 54</div>
<div id="55" class="box_2">Content 55</div>
<div id="56" class="box_2">Content 56</div>
<div id="57" class="box_2">Content 57</div>
<div id="58" class="box_2">Content 58</div>
...........................................
<div id="n" class="box_n">Content n</div>
<div id="n" class="box_n">Content n</div>
<div id="n" class="box_n">Content n</div>
<div id="n" class="box_n">Content n</div>
Apply a class on dropdowns: 在下拉菜单中应用课程:
<select id="selectField_1" class="SelectField">
<option value="51" selected>option1</option>
<option value="52">option2</option>
<option value="53">option3</option>
<option value="54">option4</option>
</select>
you have to do like this: 您必须这样做:
$('.SelectField').each(function(){
$('.box_'+this.id.split('_')[1]).hide();
$('#'+$(this).val()).show();
});
$('.SelectField').change(function () {
$('.box_'+this.id.split('_')[1]).hide();
$('#'+$(this).val()).show();
});
For setting option by its value, you need to use: 要通过其值设置选项,您需要使用:
$('#selectField_1 option[value="51"]');
and for selecting it: 并选择它:
$('#selectField_1 option[value="51"]').prop('selected', true);
Maybe you can do like this: 也许您可以这样:
<select id="selectField_1">
<option value="51" class="selected">option1</option>
<option value="52">option2</option>
<option value="53">option3</option>
<option value="54">option4</option>
</select>
And in your js: 在你的js中:
$("#your_select_id").find("option.selected").show()
As Ehsaan Sajjad said Apply Class on dropdowns to access all dropdowns with single selector like 正如Ehsaan Sajjad所说,对下拉菜单应用类可使用单个选择器访问所有下拉列表,例如
<select id="selectField_1" class="ddlClass">
<option value="51" selected>option1</option>
<option value="52">option2</option>
<option value="53">option3</option>
<option value="54">option4</option>
</select>
<select id="selectField_2" class="ddlClass">
<option value="55" selected>option1</option>
<option value="56">option2</option>
<option value="57">option3</option>
<option value="58">option4</option>
</select>
And add one more class to your divs to hide all the divs by default like 并在您的div中再添加一个类以默认隐藏所有div,例如
<div id="51" class="box_1 boxdiv">Content 51</div>
<div id="52" class="box_1 boxdiv">Content 52</div>
<div id="53" class="box_1 boxdiv">Content 53</div>
<div id="54" class="box_1 boxdiv">Content 54</div>
<div id="55" class="box_2 boxdiv">Content 55</div>
<div id="56" class="box_2 boxdiv">Content 56</div>
<div id="57" class="box_2 boxdiv">Content 57</div>
<div id="58" class="box_2 boxdiv">Content 58</div>
And in the CSS write 并在CSS中编写
.boxdiv{ display: none;}
Now your jQuery code will look like 现在您的jQuery代码将如下所示
$('.ddlClass').change(function () {
$('.box_'+this.id.split('_')[1]).hide();
$('#'+$(this).val()).show();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.