Question

如何根据下拉列表选择显示部分？如果我选择2018只能看到2018年的照片？同样是2017年。

你知道吗？我检查了教程，但没有用。每个答案都表示赞赏！

检查下面的代码，了解：

$(document).ready(function() {
  $('#selection').on('change', function() {
    if (this.value == '2017') {
      $("#seventeen").show();
      $("#eighteen").hide();
    } else if (this.value == '2018') {
      $("#eighteen").show();
      $("#seventeen").hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section_7" class="media_section">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8">
        <div class="section_head_widget animatedParent">
          <h2 class="animated fadeInLeft">Media</h2>
          <h5 class="animated bounceInUp">photos &amp; videos</h5>
        </div>
      </div>
      <div class="col-xs-12 col-sm-4 text-right">
        <div class="btn-group">
          <select id='selection'>
               <option value="2018" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2018<span class="fa fa-caret-down"></span></option>
               <option value="2017" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2017</option>
				  </select>
        </div>
      </div>
      <!--section_head_widget-->
    </div>
    <!--row-->

    <div class="row media_widget">
      <div id='eighteen' class="col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop">
            <img src="assets/img/media/media_01.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>Me Gusta</h6>
            INNA </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->

      <div id='eighteen' class="col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop2">
            <img src="assets/img/media/media_02.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>poison in news</h6>
            35 photos
          </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->

      <div id='seventeen' class="col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop4">
            <img src="assets/img/media/media_04.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>poison in news</h6>
            95 photos </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->

      <div id='eighteen' class="col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop5">
            <img src="assets/img/media/media_05.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>photos by fans</h6>
            70 photos </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->
    </div>
  </div>
  <!--container-->
</section>
<!--//media_section-->

Answer 1

这是更通用的

给每个只有这些div使用的类加上每个div的年份我使用<div class="year 2018 ...
更改时隐藏所有内容
基于值而不使用IF
触发更改onload

＆＃13;

$(document).ready(function() {
  $('#selection').on('change', function() {
    $("div.year").hide();
    $("div."+this.value).show();
  }).change();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section_7" class="media_section">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8">
        <div class="section_head_widget animatedParent">
          <h2 class="animated fadeInLeft">Media</h2>
          <h5 class="animated bounceInUp">photos &amp; videos</h5>
        </div>
      </div>
      <div class="col-xs-12 col-sm-4 text-right">
        <div class="btn-group">
          <select id='selection'>
               <option value="2018" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2018<span class="fa fa-caret-down"></span></option>
               <option value="2017" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2017</option>
				  </select>
        </div>
      </div>
      <!--section_head_widget-->
    </div>
    <!--row-->

    <div class="row media_widget">
      <div class="year 2018 col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop">
            <img src="assets/img/media/media_01.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>Me Gusta</h6>
            INNA </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->

      <div class="year 2018 col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop2">
            <img src="assets/img/media/media_02.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>poison in news</h6>
            35 photos
          </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->

      <div class="year 2017 col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop4">
            <img src="assets/img/media/media_04.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>poison in news</h6>
            95 photos </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->

      <div class="year 2018 col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop5">
            <img src="assets/img/media/media_05.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>photos by fans</h6>
            70 photos </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->
    </div>
  </div>
  <!--container-->
</section>
<!--//media_section-->

＆＃13;

Answer 2

您现有的代码已关闭。正如评论中所指出的，id属性应该是唯一的 - 仅在页面上使用一次。因此，请将seventeen和eighteen移至class而不是id。

然后我们将show / hide函数移动到一个单独的函数，这样我们就可以在开始时调用它来仅显示2018事件。

＆＃13;

$(document).ready(function() {
  $('#selection').on('change', showYear);
});

function showYear(event) {
    var year = event ? event.target.value : "2018";
    if (year === '2017') {
      $(".seventeen").show();
      $(".eighteen").hide();
    } else if (year === '2018') {
      $(".eighteen").show();
      $(".seventeen").hide();
    }
}

showYear();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section_7" class="media_section">
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8">
        <div class="section_head_widget animatedParent">
          <h2 class="animated fadeInLeft">Media</h2>
          <h5 class="animated bounceInUp">photos &amp; videos</h5>
        </div>
      </div>
      <div class="col-xs-12 col-sm-4 text-right">
        <div class="btn-group">
          <select id='selection'>
               <option value="2018" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2018<span class="fa fa-caret-down"></span></option>
               <option value="2017" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">2017</option>
              </select>
        </div>
      </div>
      <!--section_head_widget-->
    </div>
    <!--row-->

    <div class="row media_widget">
      <div class="eighteen col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop">
            <img src="assets/img/media/media_01.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>Me Gusta</h6>
            INNA </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->

      <div class="eighteen col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop2">
            <img src="assets/img/media/media_02.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>poison in news</h6>
            35 photos
          </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->

      <div class="seventeen col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop4">
            <img src="assets/img/media/media_04.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>poison in news</h6>
            95 photos </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->

      <div class="eighteen col-xs-12 col-sm-4 col-md-3 animatedParent">
        <figure class="animated fadeInUp">
          <a data-toggle="modal" data-target="#gal_pop5">
            <img src="assets/img/media/media_05.jpg" alt="" />
          </a>
          <!--hyperlink-->
          <figcaption>
            <h6>photos by fans</h6>
            70 photos </figcaption>
        </figure>
        <!--figure-->
      </div>
      <!--Column / media item-->
    </div>
  </div>
  <!--container-->
</section>
<!--//media_section-->

＆＃13;

Answer 3

我已经测试了你的代码，它运行正常。你有多个具有相同id（id =＆＃34;十八＆＃34;）的div元素，这会产生问题。试试下面的代码

HTML：

 <select name="" id="selection">
    <option value="Select">Select</option>
    <option value="2017">2017</option>
   <option value="2018">2018</option>
</select>
<div id="seventeen" style="display: none;">2017 Photos</div>
<div id="eighteen" style="display: none;">2018 Photos</div>

的Javascript

    $(document).ready(function(){
$('#selection').on('change', function() {
  if ( this.value == '2017')
  {
    $("#seventeen").show();
    $("#eighteen").hide();
  }
  else if ( this.value == '2018')
  {
    $("#eighteen").show();
    $("#seventeen").hide();
  }
});

}）;

根据下拉选择显示部分

3 个答案: