Question

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

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

enter image description here

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

海滩 - ＆gt;寒意
海滩 - ＆gt;快节奏的
海滩 - ＆gt;两个
博物馆 - ＆gt;寒意
博物馆 - ＆gt;快节奏的
博物馆 - ＆gt;两个
山脉 - ＆gt;寒意
山脉 - ＆gt;快节奏的
山脉 - ＆gt;两个

仅仅为了类似的参考，几个月前，我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个选项中的一个）显示在下面。

非常感谢！

Answer 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属性的div。

$('#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/

Answer 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();
    });

});

Answer 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更好，所以这样做。）

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

3 个答案: