Question

嗨，谢谢你的时间。

我试图这样做，当用户选择2个不同的下拉选项时，它确定第3个下拉列表。

我已经创建了一个codepen / fiddle。

http://codepen.io/brynhowlet/pen/EyYQyG?editors=1010

See codepen for details.

非常感谢。

Answer 1

据我了解，您希望根据前2个下拉列表的选择显示第3个下拉列表中的选项。

如果这是真的，我的想法是保持第3个下拉选项中前2个下拉的关系与一些参考，以便它们可以相互关联，我更喜欢在HTML中使用data-属性。

然后选择两个下拉列表，过滤需要在结果下拉列表中显示的内容并相应地显示选项。

示例：如下所示。

＆＃13;

$(function(){
	$("#sheet, #color").change(function(){
  	var sheet = $("#sheet").val();
    var color = $("#color").val();
    
    // Find All Option in product dropdown excluding the default one
    var $prodOptions = $("option", "#product").filter(":not('[disabled]')");
    
    // Filter Options on change of dropdowns
    var $filtered = $prodOptions.filter(function(){
    	return $(this).data("sheet") === sheet && $(this).data("color") === color;
    });
    
    $prodOptions.hide(); // hide all on change
    $filtered.show(); // show the filtered ones
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br> 1.)
<select id="sheet">
  <option disabled selected value="">please make a selection</option>
  <option value="white">smooth white</option>
  <option value="natural">smooth natural</option>
</select>
<br> 2.)
<select id="color">
  <option disabled selected value="">please make a selection</option>
  <option value="natural">orkney natural</option>
  <option value="white">orkney white</option>
  <option value="black">orkney black</option>
  <option value="charcoal">orkney charcoal</option>
  <option value="indigo">orkney indigo</option>
</select>
<hr>
<select id="product">
  <option disabled value="select one to preview">select one to preview</option>
  <option data-sheet="white" data-color="natural" value="natural (white sheets)">natural (white sheets)</option>
  <option data-sheet="natural" data-color="natural" value="natural (natural sheets)">natural (natural sheets)</option>
  <option data-sheet="white" data-color="white" value="white (white sheets)">white (white sheets)</option>
  <option data-sheet="natural" data-color="white" value="white (natural sheets)">white (natural sheets)</option>
  <option data-sheet="white" data-color="black" value="black (white sheets)">black (white sheets)</option>
  <option data-sheet="natural" data-color="black" value="black (natural sheets)">black (natural sheets)</option>
  <option data-sheet="white" data-color="charcoal" value="charcoal (white sheets)">charcoal (white sheets)</option>
  <option data-sheet="natural" data-color="charcoal" value="charcoal (natural sheets)">charcoal (natural sheets)</option>
  <option data-sheet="white" data-color="indigo" value="indigo (white sheets)">indigo (white sheets)</option>
  <option data-sheet="natural" data-color="indigo" value="indigo (natural sheets)">indigo (natural sheets)</option>
</select>

＆＃13;

在jsfiddle中添加：https://jsfiddle.net/ashishanexpert/sqavj95p/

根据2个其他下拉菜单的选择更改下拉菜单？

1 个答案: