使用javascript的下拉列表

Question

我有這3個下拉列表。我想根據在第一個DDL中選擇的值僅顯示1個下拉列表。有人可以幫我這個：

HTML：

<div class="field"> 
        <label for="message_for">Message For</label> 
        <select id="message_for" name="message_for"   title="Message For" > 
         <option value='shop'>Shops</option> 
         <option value='offers'>Offers</option> 
         <option value='events'>Events</option> 
         <option value='consultancy'>Consultancy</option> 
        </select> 
       </div> 

       <div class="field1"> 
        <label for="message_type">Message Type</label> 
        <select id="offer_type" name="offer_type" title="Offer  Type" > 
         <option value='special'>Special</option> 
         <option value='recommend'>Recommended</option> 
         <option value='day'>Offer of the Day</option> 
         <option value='hot'>Hot Offer</option> 
        </select> 
       </div> 

       <div class="field2"> 
        <label for="message_type">Message Type</label> 
        <select id="shop_type" name="shop_type" title="Shop Type" > 
         <option value='mall'>Mall</option> 
         <option value='warehouse'>Warehouse</option> 
         <option value='food'>Food</option> 
         <option value='banquet'>Banquet</option> 
         <option value='service'>Service</option> 
         <option value='cosmetics'>Cosmetics</option> 
         <option value='fashion'>Fashion</option> 
        </select> 
       </div> 

       <div class="field3"> 
        <label for="message_type">Message Type</label> 
        <select id="event_type" name="event_type" title="Event Type" > 
         <option value='social'>Social</option> 
         <option value='other'>Other</option> 
        </select> 
       </div> 

意味着如果我在第一DDL選擇商店那麼第二DDL應該是DIV 場2

Answer 1

基本上，這個想法是得到message_for的值，使用jquery進行選擇，並根據其值顯示或隱藏其他選擇。

$("#message_for").on("change", function(){ 
    if($(this).val() == "shop"){ 
     $(".field1").show(); 
    } 
    //here add more cases to show relevant selects 
}); 

我創造了這個的jsfiddle你 - https://jsfiddle.net/guranjanpsingh/h9prdxyy/2/

Answer 2

最簡單的方法是將類與相同的名稱option值，以對付它們添加到div秒。

$('div:not(".general")').hide(); 
 
$('#message_for').on('change', function() { 
 
    $('div:not(".general")').hide(); 
 
    $('.' + $(this).val()).show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="general"> 
 
    <label for="message_for">Message For</label> 
 
    <select id="message_for" name="message_for" title="Message For"> 
 
    <option value=''>Please Select</option> 
 
    <option value='shop'>Shops</option> 
 
    <option value='offers'>Offers</option> 
 
    <option value='events'>Events</option> 
 
    <option value='consultancy'>Consultancy</option> 
 
    </select> 
 
</div> 
 

 
<div class="shop"> 
 
    <label for="message_type">Message Type</label> 
 
    <select id="offer_type" name="offer_type" title="Offer  Type"> 
 
    <option value='special'>Special</option> 
 
    <option value='recommend'>Recommended</option> 
 
    <option value='day'>Offer of the Day</option> 
 
    <option value='hot'>Hot Offer</option> 
 
    </select> 
 
</div> 
 

 
<div class="offers"> 
 
    <label for="message_type">Message Type</label> 
 
    <select id="shop_type" name="shop_type" title="Shop Type"> 
 
    <option value='mall'>Mall</option> 
 
    <option value='warehouse'>Warehouse</option> 
 
    <option value='food'>Food</option> 
 
    <option value='banquet'>Banquet</option> 
 
    <option value='service'>Service</option> 
 
    <option value='cosmetics'>Cosmetics</option> 
 
    <option value='fashion'>Fashion</option> 
 
    </select> 
 
</div> 
 

 
<div class="events"> 
 
    <label for="message_type">Message Type</label> 
 
    <select id="event_type" name="event_type" title="Event Type"> 
 
    <option value='social'>Social</option> 
 
    <option value='other'>Other</option> 
 
    </select> 
 
</div>