Question 218512 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Html select based on another select

Can someone help me correct this code. I need value attribute for some other purpose. I need the form to post both the category id and subcategory id.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    var $optgroups = $('#subcategory > optgroup');

    $("#category").on("change",function(){
      var selectedVal = $(this).data('role');
      $('#subcategory').html($optgroups.filter('[label="'+selectedVal+'"]'));
    });  
  });
</script>


<select id="category">
  <option value="1" data-role="Fashion">Fashion</option>
  <option value="2" data-role="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 label="Electronics">
    <option value="Television">Television</option>
    <option value="Game Console">Game Console</option>
  </optgroup>
</select>
Tags:

2

Answers


  1. 0

    this refers to the SELECT element itself which does not have the attribute data you are looking for. You need to get the attribute from selected option:

    Change:

    var selectedVal = $(this).data('role');

    To:

    var selectedVal = $(this).find(':selected').data('role');

    Example Code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  var $optgroups = $('#subcategory > optgroup');

  $("#category").on("change",function(){
    var selectedVal = $(this).find(':selected').data('role');
    $('#subcategory').html($optgroups.filter('[label="'+selectedVal+'"]'));
  });  
});
</script>

<select id="category">
  <option value="1" data-role="Fashion">Fashion</option>
  <option value="2" data-role="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 label="Electronics">
    <option value="Television">Television</option>
    <option value="Game Console">Game Console</option>
  </optgroup>
</select>
    Login or Signup to reply.
  2. 0

    The only thing you are missing to have ID for both category and subcategory is a name attribute on the <select>.

    Here is a vanilla JavaScript example.

    document.addEventListener('DOMContentLoaded', e => {
  document.forms.form01.addEventListener('submit', e => {
    e.preventDefault();
    let data = new FormData(e.target);
    console.log([...data]);
  });
  
  document.forms.form01.category.addEventListener('change', e => {
    let form = e.target.form;
    if(e.target.value){
      let subcatname = e.target.selectedOptions[0].dataset.role;
      [...form.subcategory.querySelectorAll('optgroup')]
        .forEach(group => group.disabled = true);
      form.subcategory.querySelector(`optgroup[label = ${subcatname}]`).disabled = false;
    }
  });
  
});
    optgroup:disabled {
  display: none;
}
    <form name="form01">
  <select name="category">
    <option value="">Category</option>
    <option value="1" data-role="Fashion">Fashion</option>
    <option value="2" data-role="Electronics">Electronics</option>
  </select>
  <select name="subcategory" id="subcategory">
    <optgroup label="Fashion" disabled>
      <option value="1">Men's wear</option>
      <option value="2">Women's wear</option>
    </optgroup>
    <optgroup label="Electronics" disabled>
      <option value="3">Television</option>
      <option value="4">Game Console</option>
    </optgroup>
  </select>
  <button type="submit">Submit</button>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search