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

Question

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

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

在此处输入图像描述

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

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

只是为了类似的参考，几个月前，我使用以下脚本根据 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 个选项中的）显示在下面。

非常感谢！

score 3 · Accepted Answer

您可以创建 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/

score 2 · Accepted Answer

以下是 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();
    });

});

score 1 · Accepted Answer

仔细命名你的 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 更好，所以这样做。）

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

3 回答 3

Related

Reference