2

2 つのドロップダウン リストからのユーザーの選択に応じて div を表示したいと思います。

ユーザーに 3 つのドロップダウン オプションを表示しますが、最初の 2 つの選択に基づいて出力を生成するだけです。

ここに画像の説明を入力

これは、ユーザーの選択に基づいて、合計 9 つの可能な出力があることを意味します。

  1. ビーチ --> チル
  2. ビーチ --> ペースの速い
  3. ビーチ --> 両方
  4. 美術館 --> チル
  5. 博物館 --> ペースの速い
  6. 博物館 --> 両方
  7. 山 --> チル
  8. 山 --> ペースの速い
  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>

しかし、この必要性は少し異なります。どうすればこれを達成できるかについて何か考えはありますか? つまり、ユーザーが 2 つのオプションを選択したら、対応する div (9 つのオプションから) を下に表示します。

本当にありがとう！

4

3 に答える 3

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

});
于 2013-10-21T21:22:14.063 に答える