如何根据 3 个下拉选择显示特定内容？答案

【问题标题】：How to show specific content based on 3 drop down selections?如何根据 3 个下拉选择显示特定内容？
【发布时间】：2013-10-22 05:41:59
【问题描述】：

我想根据用户从两个下拉列表中的选择显示一个 div。

虽然我将向用户显示 3 个下拉选项，但我只会根据前两个的选择生成输出：

这意味着我将根据用户的选择总共有 9 个可能的输出：

海滩 --> 寒冷
海滩 --> 快节奏
海滩 --> 两者都有
博物馆 --> 寒意
博物馆 --> 快节奏
博物馆 --> 两者
山 --> 寒冷
山脉 --> 快节奏
山 --> 两者

仅作类似参考，几个月前，我used 使用以下脚本根据 2 个下拉选择生成特定输出： http://jsfiddle.net/barmar/ys3GS/2/

<body> 

    <h2>Find your Animal Name</h2>

<p>Select your birth month and your favorite color and find your animal name.</p>

<form>
        <select id="month">
            <option value="">- birth month -</option>
            <option value="January">January</option>
            <option value="February">February</option>
            <option value="March">March</option>
            <option value="April">April</option>
            <option value="May">May</option>
            <option value="June">June</option>
            <option value="July">July</option>
            <option value="August">August</option>
            <option value="September">September</option>
            <option value="October">October</option>
            <option value="November">November</option>
            <option value="December">December</option>
        </select>  
        <label class="January" for="January">January Name</label>
        <label class="February" for="February">February Name</label>
        <label class="March" for="March">March Name</label>
        <label class="April" for="April">April Name</label>        
        <label class="May" for="May">May Name</label>
        <label class="June" for="June">June Name</label>        
        <label class="July" for="July">July Name</label>
        <label class="August" for="August">August Name</label>
        <label class="September" for="September">September Name</label>
        <label class="October" for="October">October Name</label>
        <label class="November" for="November">November Name</label>
        <label class="December" for="December">December Name</label>


        <select id="color">
            <option value="">- favorite color -</option>
            <option value="Green">Green</option>
            <option value="Blue">Blue</option>
            <option value="Red">Red</option>
        </select>  
        <label class="Green" for="Green">Green Name</label>
        <label class="Blue" for="Blue">Blue Name</label>
        <label class="Red" for="Red">Red Name</label>
    </form>

  <p id="output"></p>

</body>

但这种需求有点不同。关于如何实现这一目标的任何想法？换句话说——一旦用户选择了这两个选项，我希望相应的 div（9 个选项中的）显示在下面。

非常感谢！

【问题讨论】：

如果您忽略了第三个下拉菜单，那么您现有的脚本有什么问题，它已经适用于两个？
我也想问同样的问题。我认为您需要澄清您想要的不同之处（除了添加另一个您不会用于此输出的下拉列表）。
非常感谢您的帮助！！！！你太棒了。实际上，如果可能的话，我希望使用三个下拉菜单（以及 27 个输出）来创建更多选项。那可能吗？另外 - 当没有选择任何内容或重置选择时，我将如何隐藏 div？非常感谢。

标签： javascript jquery html drop-down-menu

【解决方案1】：

您可以创建 9 个 div 元素，每个 div 元素将有两个 data 属性。一种是旅行偏好，一种是风格。像这样：

<div class="result" data-preference="beaches" data-style="chill"></div>
<div class="result" data-preference="beaches" data-style="fast-paced"></div>
<div class="result" data-preference="beaches" data-style="both"></div>
<div class="result" data-preference="museums" data-style="chill"></div>
<div class="result" data-preference="museums" data-style="fast-paced"></div>
<div class="result" data-preference="museums" data-style="both"></div>
<div class="result" data-preference="mountains" data-style="chill"></div>
<div class="result" data-preference="mountains" data-style="fast-paced"></div>
<div class="result" data-preference="mountains" data-style="both"></div>

<style>
.result {display:none;}
.result.active {display:block;}
</style>

另外，让我们继续添加一些 CSS 来隐藏这些 div 元素，然后设置一个 active 类，以便在用户做出选择后我们可以显示 div。

用户做出选择的选择元素将具有选项，并且每个值都必须与data-preference 和data-style 值相同。当用户在两个下拉列表中做出选择时，我们将抓取所有 div 并过滤掉具有匹配 data 属性的那个。

$('#preference, #style').on('change', function(){
    // set reference to select elements
    var preference = $('#preference');
    var style = $('#style');

    // check if user has made a selection on both dropdowns
    if ( preference.prop('selectedIndex') > 0 && style.prop('selectedIndex') > 0 ) {
        // remove active class from current active div element
        $('.result.active').removeClass('active');

        // get all result divs, and filter for matching data attributes
        $('.result').filter('[data-preference="' + preference.val() + '"][data-style="' + style.val() + '"]').addClass('active');            
    }
});

jsfiddle：http://jsfiddle.net/EFM9b/1/

【讨论】：

非常感谢您的帮助！！！！你太棒了。实际上，如果可能的话，我希望使用三个下拉菜单（和 27 个可能的输出）来创建更多选项。那可能吗？另外 - 当没有选择任何内容或重置选择时，我将如何隐藏 div？非常感谢。
您可以拥有任意数量的输出。您将需要一个单独的 div 元素，其中包含每个选择的内容。您还必须确保data 属性值与option 元素值匹配。您会看到我的选项值与每个 data 属性的值相同。只需要确保一切都匹配。 .result {display:none;} .result.active {display:block;} 中有一些 CSS 会隐藏和显示不应处于活动状态的 div 元素。
嘿@kyle.stearns！再次感谢。我继续尝试设置它：jsfiddle.net/EFM9b/5 但它似乎不起作用。有什么问题吗？非常感谢！！！
去掉filter(function(){ .. }); 中的空格和换行符。见：jsfiddle.net/kyleva/EFM9b/7
你是最棒的！！！非常感谢您的广泛帮助。完全只是救了我！有一个美好的一天。这是最新的小提琴：jsfiddle.net/baumdexterous/t7MFH

【解决方案2】：

以下是 jQuery 将适用于任意数量的选择字段。它将选项的值用作 CSS 类，然后用于匹配结果框。

在选择所有选择框之前，不会隐藏或显示结果。

JSFiddle

http://jsfiddle.net/chnZP/

CSS

#results-container > div { display: none; }

HTML

<div id='select-container'>
    <select>http://jsfiddle.net/9Qpjg/15/#update
        <option value='none'>Select Option</option>    
        <option value='alpha'>Alpha</option>
    </select>        
    <select>
        <option value='none'>Select Option</option>  
        <option value='red'>Red</option>
        <option value='blue'>Blue</option>
    </select>        
    <select>
        <option value='none'>Select Option</option>  
        <option value='dog'>Dog</option> 
        <option value='cat'>Cat</option>
    </select>
</div>    
<div id='results-container'>
    <div class='dog red alpha'> Alpha Red Dog</div>
    <div class='dog blue alpha'> Alpha Blue Dog</div>
    <div class='cat red alpha'> Alpha Red Cat</div>
    <div class='cat blue alpha'> Alpha Blue Cat</div>
<div>

JavaScript

jQuery(function($){

    var
        selects = $('#select-container select'),
        results = $('#results-container > div');

    selects.change(function(){        
        var values = '';
        selects.each(function(){
            values += '.' + $(this).val();
        });        
        results.filter(values).show().siblings().hide();
    });

});

【讨论】：

【解决方案3】：

仔细命名你的 div 会让你大部分时间到达那里，例如

<div class='itinerary' id="beaches_chill">...</div>
<div class='itinerary' id="beaches_fast-paced">...</div>
...
<div class='itinerary' id="mountains_both">...</div>

现在根据您的下拉菜单显示或隐藏这些：

$('#preference, #style').change(function() { 
  $('.itinerary').hide();
  $('#' + $('#preference option:selected').val() + '_' + $('#style option:selected').val()).show(); 
});

（这里的另一个答案建议使用属性——这比使用 id 更好，所以这样做。）

【讨论】：