javascript - 如何使用javascript隐藏和显示div onselect

Question

这是我正在尝试的代码 -

DIVS-

<div id="showdiv16" style="display:none;">...</div>
<div id="showdiv17" style="display:none;">...</div>
<div id="showdiv18" style="display:none;">...</div>
<div id="showdiv19" style="display:none;">...</div>

现在我有一个下拉菜单，我从中获取值 16,17, 18,19

在这个下拉菜单中，我调用了 onchange 方法作为

<select name="category" id="category" onChange="showSelected(this.value);showSubcategory();" >

我的 JavaScript 函数是-

<script type="text/javascript">
function showSelected( sapna )
{

    var myDivs = new Array(16,17,18,19); 
    for(var i=0; i<myDivs.length; i++) 
    {
        if(myDivs[i] == sapna)
        {
            var divtoshow = 'showdiv'+sapna;
            document.getElementById('showdiv'+sapna).style.display = "block";
        }
        else
        {
            document.getElementById('showdiv'+myDivs[i]).style.display = "none";
        }
    }

    return false;
}
</script>

请告诉我如何实现这种显示/隐藏 div 效果。

Answer 1

我知道这被标记为 javascript 而不是 jQuery，但是使用 jQuery 执行此操作非常简单，所以这里有一个示例。

$('#category').on('change click', function() {
    $('div').hide();
    $('#showdiv' + this.value).show();
});

工作 jsFiddle:http://jsfiddle.net/UBsp9/