Question

我在select内有form：

<select id="business_type" name="business_type" class="business_type_select">
    <option value="Restaurant">Restaurant</option>
    <option value="Pub">Pub</option>
    <option value="Take Away">Take Away</option>
    <option value="Hotel">Hotel</option>
    <option value="Shop">Shop</option>
    <option value="Event">Event</option>
    <option value="Charity">Charity</option>
    <option value="Service">Service (Taxi, Tradesperson etc)</option>
    <option value="Attraction">Attraction</option>
</select>

我想做一些类似于jQuery向下滑动toggle()函数的内容，并根据select id业务类型的选择显示不同的hidden部分。有谁知道我怎么能这样做？

Answer 1

添加一个公共类，它将帮助您隐藏所有部分。然后使用类选择器，您可以显示所选部分。

＆＃13;

$(document).ready(function() {

  //Bind click handler
  $('#business_type').change(function() {

    $('.common').hide(); //Hide all sections 

    $('.' + $(this).val()).show(); //Show selected section
  }).change();
});

＆＃13;

.common {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="business_type" name="business_type" class="business_type_select">
  <option value="charity">Charity</option>
  <option value="service">Service (Taxi, Tradesperson etc)</option>
  <option value="attraction">Attraction</option>
</select>


<div class="service common">service additional</div>
<div class="charity common">charity additional</div>
<div class="attraction common">attraction additional</div>

＆＃13;

Answer 2

你可以这样打开和隐藏你的div：

JavaScript的：

$('#business_type').change(function(){
   $("#common div").each(function() {
       $(this).attr("style", "display: none;");
   })
   $("#" + $(this).val()).attr("style", "display: block;");
})

HTML：

<form>
<select id="business_type" name="business_type" class="business_type_select">
    <option value="Restaurant" onclick="listenerSelect()">Restaurant</option>
    <option value="Pub">Pub</option>
    <option value="Take_Away">Take Away</option>
    <option value="Hotel">Hotel</option>
    <option value="Shop">Shop</option>
    <option value="Event">Event</option>
    <option value="Charity">Charity</option>
    <option value="Service">Service (Taxi, Tradesperson etc)</option>
    <option value="Attraction">Attraction</option>
</select>
</form>
<div id="common">
<div id="Pub" style="display: none;">
    Pub
</div>
<div id="Take_Away" style="display: none;">
    Take Away
</div>
<div id="Hotel" style="display: none;">
    Hotel
</div>
<div id="Shop" style="display: none;">
    Shop
</div>
<div id="Event" style="display: none;">
    Event
</div>
<div id="Charity" style="display: none;">
    Charity
</div>
<div id="Service" style="display: none;">
    Service
</div>
<div id="Attraction" style="display: none;">
    Attraction
</div>
</div>

这是一个小提琴https://jsfiddle.net/uj8efeju/

隐藏div的id和通讯选项的值必须相同。

根据所选选项显示新部分

2 个答案: