2

以下に示すように、ドロップダウン メニューと 2 つの div を含む Web ページがあります。

<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を使用した選択に基づいて、上記の2つの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 に答える