Question

我有以下JQuery，我想在用户访问页面时显示默认的divarea1，我是Jquery的新手，所以任何帮助都会很棒。

最佳

SPS

 <script type="text/javascript">
     $(document).ready(function() {
         $('.box').hide();
         $('#dropdown').change(function() {
             $('.box').hide();
             $('#div' + $(this).val()).show();
         });
     }); 
</script> 


 <select id="dropdown" class="boxformwh" name="dropdown"> 
    <option style="margin:20px;" value="area1"><b>DIV Area 1</b></option> 
    <option style="margin:20px;" value="area2"><b>DIV Area 2</b></option> 
    <option style="margin:20px;" value="area3"><b>DIV Area 3</b></option> 
 </select> 


  <div>
    <div id="divarea1" class="box">DIV Area 1</div> 
    <div id="divarea2" class="box">DIV Area 2</div> 
    <div id="divarea3" class="box">DIV Area 3</div> 
  </div>

Answer 1

您只需在页面加载时触发change处理程序，如下所示：

$(document).ready(function() {
  $('.box').hide();
  $('#dropdown').change(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
  }).change();
});

You can give it a try here，在没有任何参数的情况下调用.change()是.trigger('change')的快捷方式，它将运行您刚绑定的处理程序...所以它将使用下拉列表的初始值页面加载。

Answer 2

您明确隐藏了所有.box元素，因此您还需要明确显示divarea1元素。 onchange会像预期的那样发牢骚。

<script type="text/javascript">
     $(document).ready(function() {
         $('.box').hide();
         $('.box:first').show();
         $('#dropdown').change(function() {
             $('.box').hide();
             $('#div' + $(this).val()).show();
         });
     }); 
</script>

更改为显示第一个.box div，该div与特定div无关并将首先显示。

Answer 3

<script type="text/javascript">
     $(document).ready(function() {
         $('.box').hide();
         $('#divarea1').show();
         $('#dropdown').change(function() {
             $('.box').hide();
             $('#div' + $(this).val()).show();
         });
     }); 
</script>

Jquery Dropdown显示默认Div

3 个答案: