SCSS

Update multiple select boxes on changing select value

by NoumanAhmad

HTML

Choose: 
<select id="select1" class="stock">
    <option value="0">0</option>
    <option value="1">1</option>      
    <option value="2">2</option>      
    <option value="3">3</option>      
    <option value="4">4</option>
    <option value="5">5</option>      
    <option value="6">6</option>      
    <option value="7">7</option>      
    <option value="8">8</option>
    <option value="9">9</option> 
    <option value="10">10</option>
</select>
Choose: 
<select id="select2" class="stock">
    <option value="0">0</option>
    <option value="1">1</option>      
    <option value="2">2</option>      
    <option value="3">3</option>      
    <option value="4">4</option>
    <option value="5">5</option>      
    <option value="6">6</option>      
    <option value="7">7</option>      
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select> 
Choose: 
<select id="select3" class="stock">
  <option value="0">0</option>
  <option value="1">1</option>      
  <option value="2">2</option>      
  <option value="3">3</option>      
  <option value="4">4</option>
  <option value="5">5</option>      
  <option value="6">6</option>      
  <option value="7">7</option>      
  <option value="8">8</option>
  <option value="9">9</option> 
  <option value="10">10</option>
</select>     
Choose: 
<select id="select4" class="stock">
  <option value="0">0</option>
  <option value="1">1</option>      
  <option value="2">2</option>      
  <option value="3">3</option>      
  <option value="4">4</option>
  <option value="5">5</option>      
  <option value="6">6</option>      
  <option value="7">7</option>      
  <option value="8">8</option>
  <option value="9">9</option> 
  <option value="10">10</option> 
</select>  
<p> Max Stock: <span id="disponibles">8</span></p>

JavaScript

$(document).ready(function() {
  var maxStock = 8;
  var selectedValue;
  var $currentSelect;
  var optionValue;
  var $selectBox;
	
	// Disable All Options having value > maxStock
  $('.stock option').filter(function() {
    return $(this).val() > maxStock;
  }).prop('disabled', true);


  $('.stock').change(function() {
    $currentSelect = $(this);
    selectedValue = $currentSelect.data('selected-value');
    if (selectedValue) {
      maxStock = maxStock + parseInt(selectedValue);
    }
    selectedValue = parseInt($currentSelect.val());
    maxStock = maxStock - selectedValue;
    $currentSelect.data('selected-value', $currentSelect.val());
    $('#disponibles').text(maxStock);
		
    // Update options after selection
    $(".stock").each(function() {

      $selectBox = $(this);
      if (!$selectBox.is($currentSelect)) {
         selectedValue = parseInt($selectBox.val());
        if (!selectedValue) {
          selectedValue = 0;
        }
        $selectBox.find('option').each(function() {
          optionValue = $(this).val();
          if (optionValue > maxStock && optionValue > selectedValue) {
            $(this).prop('disabled', true);
          } else {
            $(this).prop('disabled', false);
          }
        });
      }
    });

  });
});