2015-08-15 74 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