使用下拉菜单和Javascript显示隐藏div？

我希望能够使用html下拉菜单隐藏或显示html中的div

基本上，用户会在ddl中选择一个扇区，比如说“pub chains”，与该扇区关联的pub Div将显示在页面上，其他Div将隐藏在视图之外，任何有此经验的人都可以这样做

HTML

选择一个商业部门：

连锁酒吧
理事会
财产
各种各样的
大学

使用jQuery时，任何帮助都会很好

：

var select = $( '#dropdown' );

function showTab( name ) {
  name = '#' + name;
  $( 'div' ).not( name ).hide();
  $( name ).show();
}

select.change( function() {
  showTab( $( this ).val() );   
});

showTab( select.val() );

使用jQuery：

var select = $( '#dropdown' );

function showTab( name ) {
  name = '#' + name;
  $( 'div' ).not( name ).hide();
  $( name ).show();
}

select.change( function() {
  showTab( $( this ).val() );   
});

showTab( select.val() );

---

我将尝试使用本机Javascript：

编辑：特别感谢Khez建议使用三元运算符

document.getElementById('dropdown').onchange = function(e) 
{

    var selectedValue = document.getElementById('dropdown').value,
        options = document.getElementById('dropdown').options,
        iter;

    for (iter = options.length - 1; iter >= 0; iter -= 1)
    {
        document.getElementById(options[iter].value).style.display =  
            (options[iter].value === selectedValue ? 'block' : 'none');
    }
}

---

我将尝试使用本机Javascript：

编辑：特别感谢Khez建议使用三元运算符

document.getElementById('dropdown').onchange = function(e) 
{

    var selectedValue = document.getElementById('dropdown').value,
        options = document.getElementById('dropdown').options,
        iter;

    for (iter = options.length - 1; iter >= 0; iter -= 1)
    {
        document.getElementById(options[iter].value).style.display =  
            (options[iter].value === selectedValue ? 'block' : 'none');
    }
}

---

+1因为我喜欢本机方法，如果它是一个三元运算符

document.getElementById（options[iter].value）.style.display=options[iter].value==selectedValue？'block'：“none”

，那肯定是一个更性感的方法。事实上，我会编辑我的代码来做到这一点。代码看起来确实很性感，但我很难让它正常工作，可能缺少了一个括号或其他东西，但是引用在那里，我一直在绞尽脑汁寻找为什么什么都没有发生，所以它对我来说很好。我注意到在上面的html中，您遗漏了一个与“Universitys”选项对应的div。也许这可能是你的问题？+1因为我喜欢本机方法，如果使用三元运算符

document.getElementById（options[iter].value）.style.display=options[iter].value==selectedValue？'block'：“none”

，那么肯定是一种更性感的方法。事实上，我会编辑我的代码来做到这一点。代码看起来确实很性感，但我很难让它正常工作，可能缺少了一个括号或其他东西，但是引用在那里，我一直在绞尽脑汁寻找为什么什么都没有发生，所以它对我来说很好。我注意到在上面的html中，您遗漏了一个与“Universitys”选项对应的div。也许这可能是你的问题？代码obs有效，但不在我的网页中，我试图弄清楚为什么.code.jquery.com/jquery latest.js“>代码obs有效，但不在我的网页中，我试图弄清楚为什么.code.jquery.com/jquery latest.js”>可能重复不相关的评论：你像“大学”一样拼写“大学”！可能重复不相关的评论：你拼写“Universitys”像“universions”！