根据另一个 Select 字段的另一个表单的数据动态更新 selectfield 中的选项

Question

可能吗？如果是，那么如何？请举个例子，因为我无法在任何地方找到它。（我找到了根据另一个 select 字段的数据动态更新选项的示例，但格式相同）。

Answer 1

您可以尝试使用 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>

Answer 2

您可以将事件侦听器添加到 select 的更改，并根据值更改任何其他元素。

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>

根据另一个 Select 字段的另一个表单的数据动态更新 selectfield 中的选项

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

javascript

ajax

jquery

json