使用jquery下拉列表刷新显示/隐藏div [英] refresh show/hide div using jquery dropdown

问题描述

在我的代码中我使用jquery&落下 。这个工作，但是当我刷新我的页面下拉列表不重置并显示旧选择。
ex jquery代码：

  $（document）.ready（function（）{
 $ .box'）hide（）; 
 $（'＃dropdown'）。change（function（）{
 $（'。box'）hide（）; 
 $（' #div'+ $（this）.val（））。show（）; 
}）; 
}）; 
  

HTMl OUTPUT：

 <形式> 
< select id =dropdownname =dropdown> 
< option value =0>选择< / option> 
< option value =area1> DIV Area 1< / option> 
< option value =area2> DIV Area 2< / option> 
< option value =area3> DIV Area 3< / option> 
< / select> 
< / form> 
< div id =divarea1class =box> DIV Area 1< / div> 
< div id =divarea2class =box> DIV Area 2< / div> 
< div id =divarea3class =box> DIV Area 3< / div> 
  

在线演示：

in my code i show/print div using jquery & dropdown . this worked but when refresh my page dropdown not reset and show old select. e.x jquery Code :

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

HTMl OUTPUT :

<form>
 <select id="dropdown" name="dropdown">
  <option value="0">Choose</option>
  <option value="area1">DIV Area 1</option>
  <option value="area2">DIV Area 2</option>
  <option value="area3">DIV Area 3</option>
 </select>
</form>
<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>

Online Demo: HERE

Problem : after click and choose any div this show result div But after refresh not reset dropdown and hide div result. For better understand after choose dropdown rightClick in jsffiddle result and refresh this frame (result) U see my problems.

Print SCR of Problem :

Thanks

解决方案

you should use Htmlhiddeninput which contain your selected value of the dropdown than render the div

  $(document).ready(function(){

   $('.box').hide();
  // First Way :

   $('#HiddenInput').empty();
   $('#HiddenInput').val($('#dropdown').val());
   var value =  $('#HiddenInput').val();
   $('#dropdown').val(value);
   $('#div' + value).show();


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

Here See DEMO : http://jsfiddle.net/pXdS6/16/

这篇关于使用jquery下拉列表刷新显示/隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！