如何根据另一个下拉值自动设置 select 选项？

Question

我有三个下拉菜单。我想要的是当我 select 前两个下拉列表值时，这些信息与第三个下拉列表匹配并动态更新。如果我 select“M”和“Red”，第三个下拉菜单将显示“M / Red”。

$(document).ready(function () {
  $('.variant').change(function(){ 
    var size = $(this).children(":selected").val();
    if (size != "" && size !== null) 
    {
      var itm =size + " / " + size;
      $('select[name="id"]option[value=' + itm + ']').attr('selected',true);
    }
  });

<form action="#" method="post">JSLint

  <select class="variant">
  <option value="S">S</option>
  <option value="M">M</option>
  <option value="L">L</option>
  </select>
  <select class="variant">
  <option value="Grey">Grey</option>
  <option value="Red">Red</option>
  <option value="White">White</option>
  </select>
  <br>
  <select id="data">
  <option value="S / Grey">S / Grey</option>
  <option value="M / Grey">M / Grey</option>
  <option value="L / Grey">L / Grey</option>
  <option value="S / Red">S / Red</option>
  <option value="M / Red">M / Red</option>
  <option value="L / Red">L / Red</option>
  <option value="S / White">S / White</option>
  <option value="M / White">M / White</option>
  <option value="L / White">L / White</option>
  </select>

</form>

Answer 1

    $(document).ready(function () {
      $('.variant').change(function(){ 
        var parameters = $(".variant");
      
        var p1 = $(".variant")[0].value;
        var p2 = $(".variant")[1].value;
$("#data").find("option").each(function(i,item){
$(item).removeAttr("selected");
});
$("#data").find("option[data-v='"+p1+"-"+p2+"']").attr('selected','selected');
        });
        
      });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <form action="#" method="post">JSLint

      <select class="variant">
      <option >S</option>
      <option >M</option>
      <option >L</option>
      </select>
      <select class="variant">
      <option>Grey</option>
      <option>Red</option>
      <option>White</option>
      </select>
      <br>
      <select id="data">
      <option data-v="S-Grey">S / Grey</option>
      <option data-v="M-Grey">M / Grey</option>
      <option data-v="L-Grey">L / Grey</option>
      <option data-v="S-Red">S / Red</option>
      <option data-v="M-Red">M / Red</option>
      <option data-v="L-Red">L / Red</option>
      <option data-v="S-White">S / White</option>
      <option data-v="M-White">M / White</option>
      <option data-v="L-White">L / White</option>
      </select>

    </form>

Answer 2

我向您推荐 jquery 的替代方案：

const size = document.querySelector('select[data-size]');
const color = document.querySelector('select[data-color]');
const lastSelect = document.querySelector('#data');
size.addEventListener('change', () => {
  selectOption();
});
color.addEventListener('change', () => {
  selectOption();
});

function selectOption() {
  const searchtext = size.value + ' / ' + color.value;
  for (var i = 0; i < lastSelect.options.length; ++i) {
    if (lastSelect.options[i].text === searchtext) lastSelect.options[i].selected = true;
  }
}

<form action="#" method="post">
  <select data-size>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
  </select>
  <select data-color>
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
  </select>
  <br>
  <select id="data">
    <option value="S / Grey">S / Grey</option>
    <option value="M / Grey">M / Grey</option>
    <option value="L / Grey">L / Grey</option>
    <option value="S / Red">S / Red</option>
    <option value="M / Red">M / Red</option>
    <option value="L / Red">L / Red</option>
    <option value="S / White">S / White</option>
    <option value="M / White">M / White</option>
    <option value="L / White">L / White</option>
  </select>

</form>

我用的是什么？

用自己的数据属性（数据大小、数据颜色）更改 select
addEventListener 用于将事件 'change' 添加到 select 和运行 selectOption() 函数
for-loop + ===，用于搜索与搜索文本相同的文本（大小+颜色）

推荐阅读：

评论后：

const sizecolor = document.querySelectorAll('.variant');
const lastSelect = document.querySelector('#data');
sizecolor.forEach(select => {
  select.addEventListener('change', () => {
    selectOption();
  });
});

function selectOption() {
  const searchtext = sizecolor[0].value + ' / ' + sizecolor[1].value;
  for (var i = 0; i < lastSelect.options.length; ++i) {
    if (lastSelect.options[i].text === searchtext) lastSelect.options[i].selected = true;
  }
}

<form action="#" method="post">
  <select class='variant'>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
  </select>
  <select class='variant'>
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
  </select>
  <br>
  <select id="data">
    <option value="S / Grey">S / Grey</option>
    <option value="M / Grey">M / Grey</option>
    <option value="L / Grey">L / Grey</option>
    <option value="S / Red">S / Red</option>
    <option value="M / Red">M / Red</option>
    <option value="L / Red">L / Red</option>
    <option value="S / White">S / White</option>
    <option value="M / White">M / White</option>
    <option value="L / White">L / White</option>
  </select>

</form>

其他解决方案之间的区别是我将 querySelectorAll 与 class .variant 一起使用，并在 select 处将 forEach 用于 addEventListener ].

推荐阅读：

Array.prototype.forEach()

Answer 3

您可以使用 .get() 和 .map() 从下拉列表中获取 selected 值，然后使用 :contains() 在 [=] 中设置 selected 值15=] select-框.

演示代码 :

$('.variant').change(function() {
  var size = $(".variant").get().map(function(el) {
    return el.value
  }).join(" / "); //get value of slected options and then join
  $("select#data >  option:contains(" + size + ")").prop('selected', true); //set selected value
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<form action="#" method="post">JSLint

  <select class="variant">
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
  </select>
  <select class="variant">
    <option value="Grey">Grey</option>
    <option value="Red">Red</option>
    <option value="White">White</option>
  </select>
  <br>
  <select id="data">
    <option value="S / Grey">S / Grey</option>
    <option value="M / Grey">M / Grey</option>
    <option value="L / Grey">L / Grey</option>
    <option value="S / Red">S / Red</option>
    <option value="M / Red">M / Red</option>
    <option value="L / Red">L / Red</option>
    <option value="S / White">S / White</option>
    <option value="M / White">M / White</option>
    <option value="L / White">L / White</option>
  </select>

</form>

如何根据另一个下拉值自动设置 select 选项？

How to auto select option depending on another dropdowns value?

html

javascript

jquery

dropdown