2015-08-15 87 views
0

我試圖通過下拉菜單在我的網站上顯示信息來選擇div的內容。Jquery默認div內容

這裏是我的jQuery:

<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#select").change(function(){ 
     target = $(this).val(); 
     $(".result").hide(); 
     if(target != 'none'){ 
      $("#" + target).show(); 
     } 

     return false; 
    }); 

}); 
</script> 

,這裏是我的HTML:

<select id="select"> 
    <option value="op1">R1100R/GS/RT/RS</option> 
    <option value="op2">R1100S</option> 
    <option value="op3">R1150R/GS/RT/RS</option> 
    <option value="op4">R1200R/GS/RS/ST</option> 
    <option value="op5">R1200RT</option> 
    <option value="op6">R1200C</option> 
    <option value="op7">K100/1100</option> 
    <option value="op8">K1200RS/GT pre-2005</option> 
    <option value="op9">K1200GT</option> 
    <option value="op10">K1200R/S</option> 
    </select> 

    <div id="result"> 
     <div id="op1" class="result"> 
     R1100R/GS/RT/RS 
     </div> 

     <div id="op2" class="result"> 
     R1100S 
     </div> 

     <div id="op3" class="result"> 
     R1150R/GS/RT/RS 
     </div> 

它的工作原理除了當你第一次加載時顯示所有內容的頁面罰款。

我不希望顯示任何內容,直到選中某個選項。

在此先感謝您的幫助。

+3

所以隱藏div:'.result {display:none; }' –

回答

1

如果你想要的結果,開始隱藏,添加下面的規則你的CSS:當它運行$("#" + target).show();

.result { 
    display: none; 
} 

jQuery代碼將覆蓋每個單獨的div規則。

+0

太棒了,謝謝! – Stephen