Question

我在javascript和html代码中遇到了一个小问题。当我从下拉框中选择10时应显示<div class="tab-pane text-style">，但是当我从下拉框中选择25时，此类不应显示。这是我选择的下拉框代码

<div class="">Show
  <select id="dropDown">
    <option value="page5">10</option>
    <option value="page7">25</option>
    <option value="page6">50</option>
    <option value="page8">100</option>
    <option value="page9">All</option>
  </select>
records per page</div>

这是我的div class="tab-pane text-style"代码：

<div class="tab-pane text-style" id="page0" >
  <ul class="nav nav-pills pagination pull-right" id='0'>
    <li ><a href="#">Previous</a></li>
    <li class="active"><a href="#"id="link1" onClick="pagi1()">1</a></li>
    <li ><a href="#"id="link2" onClick="pagi2()">2</a></li>
    <li ><a href="#"id="link3" onClick="pagi3()">3</a></li>
    <li ><a href="#"id="link4" onClick="pagi4()">Next</a></li>
  </ul>
</div>

jQuery的：

$(document).ready(function(){
    $('#dropdown').on('change', function() {
      if ( this.value == 'page5')
      {
        $("#page0").show();
      }
      else
      {
        $("#page0").hide();
      }
    });
});

请帮帮我......

谢谢！

Answer 1

更改事件处理程序的标识为dropdown，而不是dropDown 改变它，你很高兴。小提琴here

Answer 2

ID区分大小写。在HTML中，您的选择具有ID＆＃39; dropDown＆＃39;，而在js中，您将事件绑定到＆＃39; dropdown＆＃39;。统一名称应有所帮助。

Answer 3

$(document).ready(function(){
    $('#dropDown').on('change', function() {
      if ( this.value == 'page5')
      {
        $("#page0").show();
      }
      else
      {
        $("#page0").hide();
      }
    });
});

div class显示/隐藏选定的下拉值

3 个答案: