2

我有一个带有下拉菜单和两个 div 的网页，如下所示：

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

如何根据使用 javascript 或 jQuery 的选择来切换上述两个 div 的显示？即，当我选择选项 1 时，第一个div 应该显示，稍后一个应该隐藏，反之亦然。

4

4 回答 4

4

演示

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();
    })
});
于 2013-10-21T10:26:50.113 回答
2

尝试这个。这会帮助你

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

演示Here

于 2013-10-21T10:22:54.333 回答
1

你可以这样尝试：

            <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>
于 2013-10-21T10:34:31.617 回答
0

对于您的情况，您可以使用：

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

.. 但是有更好的方法来输出 html，因此您可以通过脚本轻松访问元素。

于 2013-10-21T10:37:53.637 回答