显示/隐藏使用下拉列表

您好，我正在尝试使用下面的代码。我喜欢代码，但我希望默认设置为DIV区域1.我的HTML代码在下拉菜单中显示DIV区域1，但我希望JavaScript在默认情况下显示DIV AREA 1。代码是什么？显示/隐藏使用下拉列表

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

<form> 
    <select id="dropdown" name="dropdown"> 
    <option value="0">Choose</option> 
    <option value="area1" selected="selected">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>

来源

2012-06-05 G-Yo

$('.box').hide().first().show();

或者：

$('.box').hide().filter("#divarea1").show();

Live DEMO

把上面的一个在DOM ready事件：

$(function(){ /*...*/ });

或者

$(document).ready(function(){ /* ... */ });

全码：（它应该回答你关于如何显示所选格下一个问题......）

$(document).ready(function() { 

    $('.box').hide().filter("#divarea1").show(); 

    $('#dropdown').change(function() { 
     var selectedId= $(this).find(':selected').text().replace(/\s/g, "").toLowerCase(); 
     console.log(selectedId); 
     $('.box').hide().filter('#' + selectedId).show(); 
    }); 
});

来源

2012-06-05 18:05:15 gdoron

这正是我一直在寻找的感谢 –

@ G-呦。看到我的更新为您的下一个问题... :) – gdoron

能做到这一点...

$('.box').hide().filter(':first').show();

来源

2012-06-05 18:08:33

我确定'.filter（'：第一'）'是一个非常非常缓慢的过滤方式。想想为了知道'first'是什么而需要采取的行动！ – gdoron

是的，你的效率可能更高 –

一个简单的问题很多复杂的答案：

如果您从下拉列表中删除第一个选项（因为你是预选有必要吗？）

$(document).ready(function(){ 
    $('.box:gt(0)').hide(); 

    $('#dropdown').change(function() { 
     $('.box:visible').hide(); 
     if ($(this).prop('selectedIndex')>0) 
      $('.box').eq($(this).prop('selectedIndex')-1).show();   
    }); 
});

http://jsfiddle.net/lucuma/xNZWY/

就显得有点简单：

我想它这样的代码了因为我们可以删除if

$(document).ready(function(){ 
    $('.box:gt(0)').hide(); 

    $('#dropdown').change(function() { 
     $('.box:visible').hide(); 
     $('.box').eq($(this).prop('selectedIndex')-1).show();   
    }); 
});

来源

2012-06-05 18:49:16 lucuma

显示/隐藏使用下拉列表

回答

相关问题