I'm having challenge selecting sub-category based on what is selected from the main category, When I selecting from the main category, the sub-category still displays all options in second category. Here's a snippet of the code

$(document).ready(function(){
  $("#category").on("change",function(){
    var selectedVal=$( "#category option:selected" ).val();
    $("#subcategory > optgroup").attr("disabled","disabled");
    $('#subcategory > optgroup[label="'+selectedVal+'"]').removeAttr("disabled");
  });  
});

<script src=".1.1/jquery.min.js"></script>
<select name="category">
  <option value="Fashion">Fashion</option>
  <option value="Electronics">Electronics</option>
</select>
<select name="subcategory" id="subcategory">
  <optgroup label="Fashion">
    <option value="Men's wear">Men's wear</option>
    <option value="Women's wear">Women's wear</option>
  </optgroup>
  <optgroup id="B" label="Electronics" disabled>
    <option value="Television">Television</option>
    <option value="Game Console">Game Console</option>
  </optgroup>
</select>

I'm having challenge selecting sub-category based on what is selected from the main category, When I selecting from the main category, the sub-category still displays all options in second category. Here's a snippet of the code

$(document).ready(function(){
  $("#category").on("change",function(){
    var selectedVal=$( "#category option:selected" ).val();
    $("#subcategory > optgroup").attr("disabled","disabled");
    $('#subcategory > optgroup[label="'+selectedVal+'"]').removeAttr("disabled");
  });  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="category">
  <option value="Fashion">Fashion</option>
  <option value="Electronics">Electronics</option>
</select>
<select name="subcategory" id="subcategory">
  <optgroup label="Fashion">
    <option value="Men's wear">Men's wear</option>
    <option value="Women's wear">Women's wear</option>
  </optgroup>
  <optgroup id="B" label="Electronics" disabled>
    <option value="Television">Television</option>
    <option value="Game Console">Game Console</option>
  </optgroup>
</select>

• javascript
• jquery
• html
• jquery-ui

• Disabling options just makes them unselectable. Doesn't mean they don't show. – Taplar Commented Oct 27, 2017 at 16:06
• Yeah It doesn't, Please how can i resolve it? – N. francis Commented Oct 27, 2017 at 16:15
• Hiding of select options doesn't work in IE. This solution may help you - fiddle.jshell/FAkEK/25/… – Phani Kumar M Commented Oct 27, 2017 at 16:19
• @PhaniKumarM I just tried the fiddle, that's not what I want, Thanks – N. francis Commented Oct 27, 2017 at 16:27

2 Answers 2

Set the select to just the options you want.

$(document).ready(function(){
  var $optgroups = $('#subcategory > optgroup');
  
  $("#category").on("change",function(){
    var selectedVal = this.value;
    
    $('#subcategory').html($optgroups.filter('[label="'+selectedVal+'"]'));
 });  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category">
<option value="Fashion">Fashion</option>
<option value="Electronics">Electronics</option>
</select>
<select name="subcategory" id="subcategory">
 <optgroup label="Fashion">
    <option value="Men's wear">Men's wear</option>
    <option value="Women's wear">Women's wear</option>
  </optgroup>
  <optgroup id="B" label="Electronics">
    <option value="Television">Television</option>
    <option value="Game Console">Game Console</option>
  </optgroup>
 </select>

Here you go with a solution

$(document).ready(function(){
  $("#category").on("change",function(){
    var selectedVal = $(this).find("option:selected" ).val();
   
    $('#subcategory > optgroup[label="'+selectedVal+'"]')
      .show()
      .siblings("optgroup")
      .css("display","none");
 });  
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category">
<option value="Fashion">Fashion</option>
<option value="Electronics">Electronics</option>
</select>
<select name="subcategory" id="subcategory">
 <optgroup label="Fashion">
    <option value="Men's wear">Men's wear</option>
    <option value="Women's wear">Women's wear</option>
  </optgroup>
  <optgroup id="B" label="Electronics">
    <option value="Television">Television</option>
    <option value="Game Console">Game Console</option>
  </optgroup>
 </select>

Hope this will help you.