基于另一个下拉选项，jQuery显示/隐藏下拉选项 [英] jQuery show/hide drop-down options based on another drop-down option

问题描述

我尝试创建一个下拉选择菜单，其中包含三个选择框，第三个框将根据第一个选择框中选择的选项显示/隐藏特定选项。

I am trying to create a drop-down select menu that will consist of three select boxes, where the 3rd box will show/hide specific option based on an option selected in the 1st select box.

我想知道这里有没有人能够为此提出解决方案。

I was wondering if anyone here is be able to suggest a solution to this.

以下是我选择的3个选择框的简化版本：

Here is a simplified version of the 3 select boxes I have:

<select class="product" id="select_1" name="product">
  <option selected="selected" value=""> Choose Category </option>
  <option value="Mens Suits"> Mens Suits </option>
  <option value="Womens Suit"> Womens Suits </option>
  <option value="Children Suit"> Children Suits </option>
</select>

<select class="color" id="select_2" name="color">
  <option selected="selected" value=""> Choose Color </option>
  <option value="Blue">Blue</option>
  <option value="Red">Red</option>
  <option value="Green">Green</option>
</select>

<select class="size" id="select_3" name="size">
  <option selected="selected" value=""> Choose Size </option>
  <!-- Mens Sizes Below -->
  <option value="36">36</option>
  <option value="38">38</option>
  <option value="40">40</option>
  <!-- Womens Sizes Below -->
  <option value="30">30</option>
  <option value="29">29</option>
  <option value="28">28</option>
  <!-- Children Sizes Below -->
  <option value="12">12</option>
  <option value="11">11</option>
  <option value="10">10</option>
</select>

通过上面的示例，我希望能够查看第3个选择的前3个选项（ 36 ， 38 和 40 ）选择第一个选择框中的选项 Mens Suits 。同样，当从第一个框中选择 Womens Suits 时，选项 30 ， 29 ，并且 28 应该在第三个框中可见。与儿童套装一样。

With the example above, I would like to be able to view the first 3 options from the 3rd select box (36, 38, and 40) when the option Mens Suits from the 1st select box is chosen. Similarly, when the Womens Suits is selectedfrom the 1st box, the options 30, 29, and 28 should be visible in the 3rd box. The same with the Children Suits.

我希望这是有道理的。

I hope this makes sense. Thank you.

推荐答案

试试：

var men = '<option selected="selected" value=""> Choose Size </option><option value="36">36</option><option value="38">38</option><option value="40">40</option>';
var women = '<option selected="selected" value=""> Choose Size </option><option value="30">30</option><option value="29">29</option><option value="28">28</option>';
var children = '<option selected="selected" value=""> Choose Size </option><option value="12">12</option><option value="11">11</option><option value="10">10</option>';
$(document).ready(function(){
    $("select#select_1").on('change',function(){
        if($(this).val()=="Mens Suits"){
            $("select#select_3").html(men);
        }else if($(this).val()=="Womens Suit"){
            $("select#select_3").html(women);
        }else if($(this).val()=="Children Suit"){
            $("select#select_3").html(children);
        }
    });
});

DEMO FIDDLE

这篇关于基于另一个下拉选项，jQuery显示/隐藏下拉选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！