根据另一个下拉列表动态更新下拉列表？

Question

我有一个带有id='alpha'的下拉列表，其中有三个选项，并且它们的值用逗号分隔。

<select class="browser-default" id="alpha">
    <option value="a,b,c">One</option>
    <option value="d">Two</option>
    <option value="e,f">Three</option>
</select>

另一个带有值的下拉框 beta。 根据在第一个下拉菜单 alpha 中选择的选项，这些值应该出现在第二个下拉菜单 beta 中。

<select class="browser-default" id="beta">
    <option value="a">First</option>
    <option value="b">Second</option>
    <option value="c">Third</option>
    <option value="d">Fourth</option>
    <option value="e">Fifth</option>
    <option value="f">Sixth</option>
</select>

如果从 alpha 下拉菜单中选择了 One。则在 beta 下拉菜单中，只应该存在 a,b,c 这些值对应的选项 - First Second Third

我尝试过的方法： 没有使用逗号分隔值。

$('#alpha').on('change', function () {
  $('#alpha').html('');
  if ($('#alpha').val() == "One") {
    $('#alpha').append('<option value="a">First</option>');
    $('#alpha').append('<option value="b">Second</option>');
    $('#alpha').append('<option value="c">Third</option>');
  } 
});

- user11509999

---

这里在SO上有很多重复的问题，它们没有帮到你吗？https://dev59.com/t2Ij5IYBdhLWcg3w8ZYF，https://dev59.com/M10a5IYBdhLWcg3whJDW，https://dev59.com/oW025IYBdhLWcg3w_a-r，https://dev59.com/5J7ha4cB1Zd3GeqPmJ9v... - Don't Panic

Answer 1

香草JS

const beta = document.getElementById('beta');
const betaOpts = [...beta.children];

document.getElementById('alpha').addEventListener(
  'change',
  (e) => {
    beta.innerHTML = betaOpts.filter(
      o => e.target.value.includes(o.value)
    ).map(o => o.outerHTML).join('')
  })

<label>Alpha</label>
<select class="browser-default" id="alpha">
  <option value="a,b,c">One</option>
  <option value="d">Two</option>
  <option value="e,f">Three</option>
</select>

<label>Beta</label>
<select class="browser-default" id="beta">
  <option value="a">First</option>
  <option value="b">Second</option>
  <option value="c">Third</option>
  <option value="d">Fourth</option>
  <option value="e">Fifth</option>
  <option value="f">Sixth</option>
</select>

- mccallofthewild

Answer 2

你可以使用split（'，'）来拆分值，然后使用for循环从拆分数组中获取值，最后使用 $（“#beta option [value =”+ vals +“]”）.show（）显示匹配值的选项。

演示代码：

$("#alpha").on("change", function() {
  var values = $(this).val().split(',') //split value which is selected
  $("#beta option").hide() //hide all options from slect box
  //loop through values
  for (var i = 0; i < values.length; i++) {
    var vals = values[i]
    $("#beta option[value=" + vals + "]").show()//show that option

  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<select class="browser-default" id="alpha">
  <option value="a,b,c">One</option>
  <option value="d">Two</option>
  <option value="e,f">Three</option>
</select>

<select class="browser-default" id="beta">
  <option selected="selected" value="">--select one-- </option>
  <option value="a">First</option>
  <option value="b">Second</option>
  <option value="c">Third</option>
  <option value="d">Fourth</option>
  <option value="e">Fifth</option>
  <option value="f">Sixth</option>
</select>

- Swati

---

如果值中有空格，则结果不会显示在下拉列表中，例如：如果我输入“apple a”而不是“a”，它就无法工作。你能提供支持吗？ - Moses

是的，只需要将 $("#beta option[value=" + vals + "]").show() 改为 $("#beta option[value='" + vals + "']").show() 即可。 @Moses - Swati