Dynamically update options in selectfield depending on another Select Field's data of another F-CodePudding

Is it possible? If yes, then how? Please, give an example, because I can't find it anywhere. (I found the example of dynamically update options depending on another select field's data but in the same form).

CodePudding user response：

You can add an eventlistener to the change of the select and based on value change any other element.

const select1 = document.querySelector('.select_1');
const option1 = document.querySelector('.select_2 option:first-of-type');
select1.addEventListener('change', function(){
  if(this.value === 'b'){
    option1.textContent = 'newA';
    option1.setAttribute('value','newA');
  } else {
    option1.textContent = 'A';
    option1.setAttribute('value','a');    
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <select >
    <option value="a">A</option>
    <option value="b">B</option>
  </select>
</form>

<form>
  <select >
    <option value="a">A</option>
    <option value="b">B</option>
  </select>
</form>

CodePudding user response：

You can try this using JQuery:

 // Hide all options initially
    $('#selectChild option').hide();
    // When the user changes the Parent select (Animal Category)
    $(document).on('change', '#selectParent', function() {

      // Assign the value of the selected option to variable
      let category = $('#selectParent option:selected').val();

      // Run through each Child select (Animal Name) option and filter based on its data-* attribute value

      $('#selectChild option').each(function() {
        if ($(this).data('category') != category) {
          $(this).hide()
        } else {
          $(this).show()
        }
      })
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h5>
  Animal Category
</h5>
<select id="selectParent">
  <option value="">Please Select</option>
  <option value="mammal">Mammal</option>
  <option value="insect">Insect</option>

</select>
<br>
<hr>
<h5>
  Animal Name
</h5>
<select id="selectChild">
  <option> Please Select </option>
  <option value="dog" data-category="mammal">Dog</option>
  <option value="cat" data-category="mammal">Cat</option>
  <option value="horse" data-category="mammal">Horse</option>

  <option value="spider" data-category="insect">Spider</option>
  <option value="ant" data-category="insect">Ant</option>
  <option value="roach" data-category="insect">Roach</option>
</select>