如何根据另一个下拉值自动选择选项? [英] How to auto select option depending on another dropdowns value?

问题描述

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

I have three dropdowns. What I want is when I select the first two dropdown values, those information match with the third dropdown and update dynamically. If I select "M" and "Red" the third dropdown would show the "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>

推荐答案

您可以使用 .get() 和 .map() 从下拉列表和然后使用 :contains() 在 data 选择框中设置选定的值.

You can use .get() and .map() to get selected values from dropdown and then use :contains() to set selected value in data select-box.

演示代码:

$('.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>

这篇关于如何根据另一个下拉值自动选择选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！