[英]How to get particular select option based on previous select tag in jQuery?
I want to get option like PCMB
and PCMC
in select option when I selected SCIENCE
as a previous select tag and nothing when I selected Commerce
. 当我选择
SCIENCE
作为先前的选择标签时,我想在选择选项中获得PCMB
和PCMC
的选项,而在选择Commerce
时什么也没有。
<div class="row Time">
<div class="col-md-4 col-sm-4">
<p>Course<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="Science">Science</option>
<option value="" id="Commerce">Commerce</option>
<option value="" id="Arts">Arts</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Branch<span class="astric">*</span></p>
<select class="Academic">
<option value="" id="Select">Select</option>
<option value="" id="PCMB">PCMB</option>
<option value="" id="PCMC">PCMC</option>
<option value="" id="PCMS">PCMS</option>
</select>
</div>
<div class="col-md-4 col-sm-4">
<p>Year<span class="astric">*</span></p>
<select class="Academic">
<option value="">Select</option>
<option value="" id="01">01</option>
<option value="" id="02">02</option>
</select>
</div>
</div>
You will have to make couple of changes to your code to achieve your desired result. 您将必须对代码进行几处更改才能获得所需的结果。
You should not include the second select box initially in DOM if you want to show it only after user select a specific value. 如果只想在用户选择特定值后显示它,则不应在DOM中最初包含第二个选择框。
You will have to add values to your select Options 您将必须在选择的选项中添加值
You Class or Id to your select boxes 您将分类或ID放入您的选择框
Use Jquery .on('change')
function to accomplish your desired result 使用Jquery
.on('change')
函数完成所需的结果
Use the below code for further reference. 使用下面的代码作进一步的参考。
var selectLevelTwo = '<div class="col-md-4 col-sm-4 select-level-two"><p>Branch<span class="astric">*</span></p><select class="Academic"><option value="" id="Select">Select</option><option value="" id="PCMB">PCMB</option><option value="" id="PCMC">PCMC</option><option value="" id="PCMS">PCMS</option></select></div>'; $(document).on('change', '.select-level-one', function(){ var firstSelectValue = $('.select-level-one option:selected').val(); if(firstSelectValue == 'science'){ $(this).parent().after(selectLevelTwo); } else { $('.select-level-two').fadeOut('fast'); } });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row Time"> <div class="col-md-4 col-sm-4"> <p>Course<span class="astric">*</span></p> <select class="Academic select-level-one"> <option value="">Select</option> <option value="science" id="Science">Science</option> <option value="commerce" id="Commerce">Commerce</option> <option value="arts" id="Arts">Arts</option> </select> </div> <div class="col-md-4 col-sm-4"> <p>Year<span class="astric">*</span></p> <select class="Academic"> <option value="">Select</option> <option value="" id="01">01</option> <option value="" id="02">02</option> </select> </div> </div>
Hope this help 希望这个帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.