首页 文章

根据下拉框选择显示/隐藏多个div

提问于
浏览
0

我有一个Combobox,其值分别为1,2,3和4 . 我还有4个div分别命名为div1,div2,div3和div4 .

我想要一个具有以下条件的javascript: - 当从组合框中选择值1时,它应该显示div1 - 当从组合框中选择值2时,它应该显示div1和div2 - 当从组合框中选择值3时,它应该显示div1 ,div2和div3 - 当从组合框中选择值4时,它应该显示div1,div2,div3和div4 - 如果从组合框中单击值2,它应该自动隐藏div3和div4,并且应该只显示div1和div2

我在stackoverflow上找到了一些小提琴,但它没有做我需要的东西 .

我努力做到这一点,但最终我最终切换了一个div .

4 回答

  • 0

    试试这个 . 这将允许您按顺序显示div .

    $('div').hide();
    $('select').click(function()
    { 
        var targetDiv = $("#div" + $(this).val());
        var prevDiv = $($("#div" + $(this).val())).prev('div');
        if($(this).val() == "1" || prevDiv.is(":visible") )
          $("#div" + $(this).val()).show();
    
    });
    

    http://jsfiddle.net/o5y9959b/3/

    更新:

    为了显示具有组合选择值的项目直到第1个div,只需按相反的顺序执行for循环 .

    $('div').hide();
    $('select').click(function()
    { 
        $('div').hide(); // remove this if you don't want to hide all of them 
        for(var i = $(this).val() ; i >= 1 ; i--)
            $("#div" + i).show();      
    });
    

    http://jsfiddle.net/o5y9959b/6/

  • 0

    试试这个 - 单选按钮可以帮助控制状态,你可以相应地显示这些div . 这是关于单选按钮hack的好文章http://alistapart.com/article/radio-controlled-web-design

  • 0

    这可以使用on change event来实现 .

    $(document).on('change','#combobox',function(){
        var selected = $("#combobox option:selected").val;
        switch(selected){
            case '1': /* do something */ break;
            case '2': /* do something */ break;
            case '3': /* do something */ break;
            default: break;
        }
    })
    
  • 0

    你可以这样做 :

    $(document).on('change','#combobox',function(){
        var selected = $("#combobox option:selected");
        if ($("#div" + selected.val()).length > 0) {
        	$("#div" + selected.val()).prevAll().show();
            $("#div" + selected.val()).nextAll().hide();
            $("#div" + selected.val()).show();
    	}
        else {
            $('.container > div').show();
        }
    });
    
    div {
        height: 30px;
    }
    #div1 {
        background-color:green;
    }
    
    #div2 {
        background-color:orange;
    }
    
    #div3 {
        background-color:blue;
    }
    
    #div4 {
        background-color:red;
    }
    
    #div5 {
        background-color:#c23abc;
    }
    
    #div6 {
        background-color:#c2da2c;
    }
    
    #div7 {
        background-color:#e26ab1;
    }
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <select id="combobox" name="select">
      <option value="all">Show all</option> 
      <option value="1">Show till div 1</option> 
      <option value="2">Show till div 2</option>
      <option value="3">Show till div 3</option>
      <option value="4">Show till div 4</option>
      <option value="5">Show till div 5</option>
      <option value="6">Show till div 6</option>
      <option value="7">Show till div 7</option>
        
    </select>
    <div class="container">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
        <div id="div5"></div>
        <div id="div6"></div>
        <div id="div7"></div>
    </div>
    

    希望这可以帮助!!!

相关问题