2015-10-19 65 views
0

我想显示/隐藏div取决于选择。jquery隐藏div没有显示在加载页面

下面的代码可以正常工作,但在使用默认选定值(opt3)加载页面时不起作用。

我该如何获得第一次加载jQuery的div id#opt3 diplayed?

<body> 

     <div> 

     <p> 

       <select name="routing-sel" id="routing"> 

         <option value="opt1">opt1</option> 

         <option value="opt2">opt2</option> 

         <option value="opt3" selected>opt3</option> 

         <!-- the selected value will be dynamically generated by PHP--> 

       </select> 

       </p> 

     </div> 



     <div id="opt1" class="form" style="display:none"> 

       <p>opt1 selected</p> 

     </div> 

     <div id="opt2" class="form" style="display:none"> 

       <p>opt2 selected</p> 

     </div> 

     <div id="opt3" class="form" style="display:none"> 

       <p>opt3 selected</p> 

     </div> 



     <script src="jquery-1.11.3.min.js"></script> 



     <script> 

     $(document).ready(function() { 

       $('select#routing').change(function() { 

         $('.form').hide(); 

         $('#' + $(this).val()).show(); 

       }); 

     }); 

     </script> 

</body> 
+0

'$( '#' + $( '#选择路由')。VAL())。节目() ;'? –

回答

0

你可以这样说:

$(document).ready(function() { 

      $('#' + $("#routing").val()).show(); // Show default chosen option on load 

      $('select#routing').change(function() { 

        $('.form').hide(); 

        $('#' + $(this).val()).show(); 

      }); 

    }); 

http://jsfiddle.net/sandenay/8zewxp7r/

0

只需修改您的document.ready了这一点。这将工作..

$(文件)。就绪(函数(){

$('#' + $('select#routing').val()).show(); 

      $('select#routing').change(function() { 

        $('.form').hide(); 

        $('#' + $(this).val()).show(); 

      }); 

    }); 
相关问题