Question 69792 in Ajax Question posted in
You can find the official documentation here.

Dynamically update options in selectfield depending on another Select Field's data of another Form – Jquery ajax

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).

Tags:

2

Answers


  1. 0

    You can try this using JQuery:

     // Hide all options initially
    $('#selectChild option').attr('disabled',true);
    // 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').filter(function() {
        if ($(this).data('category') != category) {
          $(this).attr('disabled',true);
        } else {
          $(this).attr('disabled',false);
        }
      })
    });
    <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>
    Login or Signup to reply.
  2. 0

    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 class="select_1">
    <option value="a">A</option>
    <option value="b">B</option>
  </select>
</form>

<form>
  <select class="select_2">
    <option value="a">A</option>
    <option value="b">B</option>
  </select>
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search