Jquery下拉顯示默認Div

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

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

Answer 2

你只需要觸發頁面加載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 3

您明確隱藏了所有.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，將首先顯示。