Afficher/masquer (activer / désactiver) l'affichage de vrd basé sur la sélection à l'aide de javascript

J'ai une page web avec un menu déroulant et deux divs comme indiqué ci-dessous:

<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>

Comment puis-je activer /désactiver l'affichage de ces deux divs basé sur la sélection à l'aide de javascript ou jQuery? I. e. lorsque je choisis l'option 1, le firstdiv doit s'afficher et que plus tard, on devrait se cacher et vice versa.

InformationsquelleAutor mpsbhat | 2013-10-21
  1. 4

    démo

    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();
    })
});
    InformationsquelleAutor
  2. 2

    de l'essayer. cela vous aidera à

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

    Démo Ici

    InformationsquelleAutor S. S. Rawat
  3. 1

    vous pouvez essayer comme ceci:

                <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>
    InformationsquelleAutor shemy
  4. 0

    Pour votre cas, vous pouvez utiliser:

    <!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>

    .. mais il y a beaucoup de meilleures façons de sortie html de sorte que vous pouvez accéder à des éléments facilement via un script.

    InformationsquelleAutor skobaljic