jQuery addClass example

Change class name on click in jQuery

by wisegorilla

HTML

<div id="product_select_container" class="product_select_container">
<form name="product_select" id="product_select_form" action="retailer-gift-request/" method="post">
<select name="cushion_type" id="cushion_type" class="product_select">
  <option value="" disabled selected>Select Cushion Type</option>
  <option value="1" data-option-id="1">Sitzen </option>
  <option value="2" data-option-id="2">Schlafen</option>
  <option value="3" data-option-id="3">Reisen</option>
</select>

<select name="cushion_name" id="cushion_name" class="product_select" disabled>
  <option value="a" disabled selected data-option-id="a">Select Cushion Model</option>
  <option value="1" data-option-id="1">Comfort Cushion</option>
  <option value="2" data-option-id="1">Freilagerungssitzkissen</option>
  <option value="3" data-option-id="1">Rückenkissen</option>
  <option value="4" data-option-id="1">Sitzkissen zum Druckmanagement</option>
  <option value="5" data-option-id="1">Wedge Cushion</option>
  <option value="6" data-option-id="1">Wedge Pillow</option>
  <option value="7" data-option-id="2">Comfort Pillow</option>
  <option value="8" data-option-id="2">Dreamy Cushion</option>
  <option value="9" data-option-id="2">Kniekissen</option>
  <option value="10" data-option-id="3">Reise Nackenkissen</option>
</select>

<select name="cushion_size" id="cushion_size" class="product_select" disabled>
  <option value="a" disabled selected data-option-id="a">Select Cushion Size</option>
  <option value="2" data-option-id="2">Standard</option>
  <option value="3" data-option-id="2">Large</option>
  <option value="1" data-option-id="3">Small</option>
  <option value="2" data-option-id="3">Standard</option>
  <option value="2" data-option-id="4">Standard</option>
  <option value="3" data-option-id="4">Large</option>
</select>

<input class="product_select_submit" id="submit_btn" name="submit" type="submit" value="Submit" disabled>
</form>
</div>

JavaScript

var $cushion_type = $('#cushion_type'),
  $cushion_name = $('#cushion_name'),
  $cushion_size = $('#cushion_size'),
	$submit_btn = $('#submit_btn'),
  $options_a = $cushion_name.find('option'),
  $options_b = $cushion_size.find('option');
  


$cushion_type.on('change', function() {
  $cushion_name.prop("disabled", false).html($options_a.filter(function() {
    return $(this).data('option-id') === parseInt($cushion_type.val(), 10) || $(this).data('option-id') === "a"
  })).val('a')
  $cushion_size.val('a')
  $cushion_size.prop("disabled", true)
  
})

$cushion_name.on('change', function() {
  $cushion_size.html($options_b.filter(function() {
    return $(this).data('option-id') === parseInt($cushion_name.val(), 10) || $(this).data('option-id') === "a"
  }));
  $cushion_size.prop('disabled', $cushion_size.find('option').length == 1).val('a')
  
    if ($cushion_name.get(0).selectedIndex > 0 && $cushion_size.prop("disabled") == true) {
       $submit_btn.prop("disabled", false)
    }
    
    else if ($cushion_name.get(0).selectedIndex > 0 && $cushion_size.get(0).selectedIndex == 0) {
       $submit_btn.prop("disabled", true)
    }
    else {
      $submit_btn.prop("disabled", false)
    }
})


$cushion_size.on('change', function() {
  
    if ($cushion_name.get(0).selectedIndex > 0) {
       $submit_btn.prop("disabled", false)
    }
  
    else {
      $submit_btn.prop("disabled", true)
    }
})