根据下拉列表中选择的项目隐藏所有元素

Question

这是我的html：

<div id="drinks">
    <select id="test">
        <option data-tab="Coffee">Coffee</option>
        <option data-tab="Cold Drinks">Cold Drinks</option>
        <option data-tab="Hot Drinks">Hot Drinks</option>
    </select>
    <div class="section-wrapper">
        <div class="row">
            <section class="Coffee">
                <h3>Coffee </h3>
                <h4>Coffee Flavor</h4>
            </section>
        </div>
        <div class="row">
            <section class="Cold Drinks">
                <h3>Cold Drink</h3>
                <h4>Cold Drink</h4>
            </section>
        </div>
        <div class="row">
            <section class="Hot Drinks">
                <h3>Hot Drink</h3>
                <h4>Hot Drink</h4>
            </section>
        </div>
    </div>
</div>

Javascript代码：

$(document).ready(function() {
    $("#test").on('load change', function() {  
        $("#test option").each(function() {
            $("#drinks ." + $(this).val()).hide();
        })
        $("#drinks ." + $(this).val()).show();
    }).change();
});

我只想显示与下拉数据选项卡值匹配的类。因此，如果选择咖啡，则只应显示咖啡的 h3 和 h4 标签。其他下拉列表也是如此。我做错了什么？这是我的小提琴的链接。

https://jsfiddle.net/mmaharjan/onbusdhv/

Answer 1

您需要进行一些标记更改以使其简单。

与在option中使用value来存储选项的值一样，在"使用属性存储类型"部分中也是如此。如果在选项中使用value，则可以通过读取select的值轻松获取当前值。如果您在section中使用 class，那么[space] 被视为类中的分隔符，因此Cold Drinks将意味着 2 个类Cold和Drinks，因此使用属性选择器会非常容易（虽然您也可以将属性class属性与属性选择器一起使用，但最好使用另一个属性）

$(document).ready(function() {
  $("#test").on('load change', function() {
    $('#drinks .section-wrapper > section').hide().filter('[data-type="' + $(this).val() + '"]').show();
  }).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="drinks">
  <select id="test">
    <option value="Coffee">Coffee</option>
    <option value="Cold Drinks">Cold Drinks</option>
    <option value="Hot Drinks">Hot Drinks</option>
  </select>
  <div class="section-wrapper">
    <section data-type="Coffee">
      <h3>Coffee </h3>
      <h4>Coffee Flavor</h4>
    </section>
    <section data-type="Cold Drinks">
      <h3>Cold Drink</h3>
      <h4>Cold Drink</h4>
    </section>
    <section data-type="Hot Drinks">
      <h3>Hot Drink</h3>
      <h4>Hot Drink</h4>
    </section>
  </div>
</div>
</body>

Answer 2

试试下面的代码

.HTML

<div id="drinks">
      <select id="test">
        <option data-tab="Coffee">Coffee</option>
        <option data-tab="ColdDrinks">Cold Drinks</option>
        <option data-tab="HotDrinks">Hot Drinks</option>
      </select>
      <div class="section-wrapper">
        <section class="Coffee">
          <h3>Coffee </h3>
          <h4>Coffee Flavor</h4>
        </section>
        <section class="ColdDrinks">
          <h3>Cold Drink</h3>
          <h4>Cold Drink</h4>
        </section>
        <section class="HotDrinks">
          <h3>Hot Drink</h3>
          <h4>Hot Drink</h4>
        </section>
      </div>
    </div>

和JavaScript代码

$(document).ready(function() {
    $("#test").change(function(){
        $("section").hide();
        $("section" + "." + $('option:selected', this).attr('data-tab')).show();
    })
 });