Dropdownlist using javascript

Dropdownlist using javascript

本文关键字：javascript using Dropdownlist      更新时间：2023-09-26

我有这3个下拉列表。我只想根据第一个DDL中选择的值显示一个下拉列表。有人能帮我这个吗：

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

基本上，我们的想法是使用jquery获取message_forselect的值，并根据其值显示或隐藏其他选择。

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

最简单的方法是将类添加到与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>

相关文章：