CODEWITHSUNDEEP
javascriptjquery
thejaswini
thejaswini

Reputation: 11

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. 

<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>

Upvotes: 0

Views: 44

Answers (1)

Rajan Benipuri
Rajan Benipuri

Reputation: 1832

You will have to make couple of changes to your code to achieve your desired result.

  1. You should not include the second select box initially in DOM if you want to show it only after user select a specific value.

  2. You will have to add values to your select Options

  3. You Class or Id to your select boxes

  4. Use Jquery .on('change') function to accomplish your desired result

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

Upvotes: 1

Related Questions