Show/hide (toggle) the display of divs based on selection using javascript [closed]

I have a web page with a dropdown menu and two divs as given below:

<html>
<head>
<title>Show/Hide a div section based on selection</title>
</head>
<body>
    <select id='sel'>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    </select>

    <div id="firstdiv">
    <label><input type="checkbox" id='1' />A</label>
    <label><input type="checkbox" id='2' />B</label>
    <label><input type="checkbox" id='3' />C</label>
    </div>

    <div id="seconddiv">
    <label><input type="checkbox" id='4' />D</label>
    <label><input type="checkbox" id='5' />E</label>
    <label><input type="checkbox" id='6' />F</label>
    </div>
</body>
</html>

How can I toggle the display of the above two divs based on selection using javascript or jQuery? I.e. when I select option 1, the firstdiv should display and later one should hide and vice versa.

demo

HTML

<select id="selectMe">
    <option value="div1">div1</option>
    <option value="div2">div2</option>
</select>
<br><br><br>

 <div id="div1" class="group" >
  <label><input type="checkbox" id='1' />A</label>
<label><input type="checkbox" id='2' />B</label>
<label><input type="checkbox" id='3' />C</label>
</div>

 <div id="div2" class="group" >
  <label><input type="checkbox" id='4' />D</label>
<label><input type="checkbox" id='5' />E</label>
<label><input type="checkbox" id='6' />F</label>
</div>

JS:

$(document).ready(function () {
    $('.group').hide();
    $('#div1').show();
    $('#selectMe').change(function () {
        $('.group').hide();
        $('#'+$(this).val()).show();
    })
});

try this. this will help you

 $('#sel').change(function(){
    if($(this).val()==1){
            $('#firstdiv').show();
            $('#seconddiv').hide();
    }
    else{
            $('#seconddiv').show();
            $('#firstdiv').hide();
    }       
});

Demo Here

you can try like this:

            <script>
                function test1(){

                var elem = document.getElementById("test").value;
                document.getElementById("firstdiv").style.display = (elem == "1") ? "block" : "none";
                document.getElementById("seconddiv").style.display = (elem == "2") ? "block" : "none";
            }
            </script>

            <select id="test" onchange="test1();">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            </select>

            <div id="firstdiv" style="display:none">
            <label><input type="checkbox" id='1' />A</label>
            <label><input type="checkbox" id='2' />B</label>
            <label><input type="checkbox" id='3' />C</label>
            </div>

            <div id="seconddiv" style="display:none">
            <label><input type="checkbox" id='4' />D</label>
            <label><input type="checkbox" id='5' />E</label>
            <label><input type="checkbox" id='6' />F</label>
            </div>

For your case, you can use:

<!doctype html>
<html>

    <head>

        <title>Hide elements on select change</title>

    </head>

    <body>

        <select id="sel">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
        </select>

        <div id="firstdiv">
            <label><input type="checkbox" id='1' />A</label>
            <label><input type="checkbox" id='2' />B</label>
            <label><input type="checkbox" id='3' />C</label>
        </div>

        <div id="seconddiv">
            <label><input type="checkbox" id='4' />D</label>
            <label><input type="checkbox" id='5' />E</label>
            <label><input type="checkbox" id='6' />F</label>
        </div>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript">
            $('#sel').on('change', function() {
                var baseVal = $(this).val();
                switch (baseVal) {
                    case '1' :
                        $('#seconddiv').hide();
                        $('#firstdiv').show();
                        break;
                    case '2' :
                        $('#firstdiv').hide();
                        $('#seconddiv').show();
                        break;
                    default:
                        break;
                };
            });
            $('#sel').trigger('change');
        </script>

    </body>

</html>

.. but there are much better ways to output html so you can access elements easily via script.

来源：https://stackoverflow.com/questions/19491858/show-hide-toggle-the-display-of-divs-based-on-selection-using-javascript

标签

javascript

jquery

html

select

show-hide