admin管理员组

文章数量:1394611

I would like to display a div depending on a user's selection from two drop down lists.

While I'm going to display 3 dropdown options to the users, I'm only going to generate the output based on the selection of the first two:

This means that I will have a total of 9 possible outputs based on the user's selection:

  1. Beaches --> Chill
  2. Beaches --> Fast-Paced
  3. Beaches --> Both
  4. Museums --> Chill
  5. Museums --> Fast-Paced
  6. Museums --> Both
  7. Mountains --> Chill
  8. Mountains --> Fast-Paced
  9. Mountains --> Both

Just for similar reference, a few months ago, I used the following script to generate a specific output based on 2 drop down selections: /

<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>

But this need is a little different. Any thoughts on how I can achieve this? In other words – once the user selected the two options, I want the corresponding div (out of the 9 options) to show up below.

Thanks so much!

I would like to display a div depending on a user's selection from two drop down lists.

While I'm going to display 3 dropdown options to the users, I'm only going to generate the output based on the selection of the first two:

This means that I will have a total of 9 possible outputs based on the user's selection:

  1. Beaches --> Chill
  2. Beaches --> Fast-Paced
  3. Beaches --> Both
  4. Museums --> Chill
  5. Museums --> Fast-Paced
  6. Museums --> Both
  7. Mountains --> Chill
  8. Mountains --> Fast-Paced
  9. Mountains --> Both

Just for similar reference, a few months ago, I used the following script to generate a specific output based on 2 drop down selections: http://jsfiddle/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>

But this need is a little different. Any thoughts on how I can achieve this? In other words – once the user selected the two options, I want the corresponding div (out of the 9 options) to show up below.

Thanks so much!

  • javascript
  • jquery
  • html
  • drop-down-menu
Share Improve this question edited May 23, 2017 at 11:59 CommunityBot 11 silver badge asked Oct 21, 2013 at 19:48 OriOri 2592 gold badges8 silver badges28 bronze badges 3
  • 2 If you're ignoring the 3rd drop-down then what's wrong with your existing script, which already works with two? – Diodeus - James MacFarlane Commented Oct 21, 2013 at 19:54
  • I was going to ask the same thing. I think you need to clarify what you want that's different (besides adding another dropdown you won't use for this output). – spacebean Commented Oct 21, 2013 at 19:58
  • Thank you so much for your help!!!! You are amazing. Actually, I would love to create more options if possible using three dropdown menus (and an output of 27). Would that be possible? Also – how would I hide the div when nothing is selected or if you reset the selection? Thanks so much. – Ori Commented Oct 21, 2013 at 20:30
Add a ment  | 

3 Answers 3

Reset to default 3

You can create 9 div elements and each div element will have two data attributes. One for travel preference and one for style. Like so:

<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>

Also, let's go ahead and add some CSS to hide these div elements, and then setup an active class so that we can display the div once the user has made their selections.

The select elements where the user makes a choice will have options, and each value will have to be identical to the data-preference and data-style values. When a user has made a selection in both of the dropdowns we'll grab all the div's and filter out the one that has the matching data attributes.

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

The following is jQuery will work for any number of select fields. It uses the values of the options as CSS classes which are then used to match against the results boxes.

No hiding or showing of the results happens until all select boxes are chosen.

JSFiddle

http://jsfiddle/chnZP/

CSS

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

HTML

<div id='select-container'>
    <select>http://jsfiddle/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();
    });

});

Careful naming of your divs will get you most of the way there, e.g.

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

Now show or hide these based on your dropdowns:

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

(Another answer here suggests using attributes--that's nicer than using the id, so do that.)

本文标签： javascriptHow to show specific content based on 3 drop down selectionsStack Overflow

版权声明：本文标题：javascript - How to show specific content based on 3 drop down selections? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744096328a2590348.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。