Prevent changing value of specific selected options and change value of rest options

http://ift.tt/1AFNWYe

I have four selects which show values of chosen options in input box.

What I want is after choosing in the first place option with class='Math', then 'English' and lastly 'Biology'/ 'Geography' / 'History' in one of dropdowns, the other options should change value to '0'.



'Math' and 'English' and 'one of selected option' should remain their values

For example, if I choose 'Math', then 'English', then lastly one of available options ('Biology', 'Geography', 'History'), let say Biology.

So values of 'Geography' and 'History' should be '0'.



The values of example above should looks like this:

Math - 1

English -2

Biology - 4

Geography - 0

History - 0

// Prevent choosing same option in selects

$('select[name*="select-option"]').change(function() {

  var topic = $(this).find("option:selected").text();


  $('select[name*="select-option"]').not(this).each(function() {
    $('option', this).each(function() {
      if ($(this).text() == topic) {
        $(this).prop('disabled', true);
      } else { // Change value to '0' for rest options
        $('select[name*="select-option"] option[value="' + $(this).val() + '"]').val('0');
      }
    });
  });

});

// Show values in input

$("#cd-dropdown0").change(function() {
  $("#id_search0").keyup().val($(this).val());
});

$("#cd-dropdown1").change(function() {
  $("#id_search1").keyup().val($(this).val());
});

$("#cd-dropdown2").change(function() {
  $("#id_search2").keyup().val($(this).val());
});

$("#cd-dropdown3").change(function() {
  $("#id_search3").keyup().val($(this).val());
});

<script src="http://ift.tt/1oMJErh"></script>
<input type="text" id="id_search0" disabled/>
<select id="cd-dropdown0" class="cd-select" name="select-option">
  <option value="0" selected>Choose your topic</option>
  <option value="1" class="mat">Math</option>
  <option value="2" class="eng">English</option>
  <option value="3" class="geo">Geography</option>
  <option value="4" class="bio">Biology</option>
  <option value="5" class="his">History</option>
</select>
<br>
<input type="text" id="id_search1" disabled/>
<select id="cd-dropdown1" class="cd-select" name="select-option">
  <option value="0" selected>Choose your topic</option>
  <option value="1" class="mat">Math</option>
  <option value="2" class="eng">English</option>
  <option value="3" class="geo">Geography</option>
  <option value="4" class="bio">Biology</option>
  <option value="5" class="his">History</option>
</select>
<br>
<input type="text" id="id_search2" disabled/>
<select id="cd-dropdown2" class="cd-select" name="select-option">
  <option value="0" selected>Choose your topic</option>
  <option value="1" class="mat">Math</option>
  <option value="2" class="eng">English</option>
  <option value="3" class="geo">Geography</option>
  <option value="4" class="bio">Biology</option>
  <option value="5" class="his">History</option>
</select>
<br>
<input type="text" id="id_search3" disabled/>
<select id="cd-dropdown3" class="cd-select" name="select-option">
  <option value="0" selected>Choose your topic</option>
  <option value="1" class="mat">Math</option>
  <option value="2" class="eng">English</option>
  <option value="3" class="geo">Geography</option>
  <option value="4" class="bio">Biology</option>
  <option value="5" class="his">History</option>
</select>