javascript - 使用 javascript 根据选择显示/隐藏(切换)div 的显示

标签 javascript jquery html select show-hide

<分区>

我有一个带有下拉菜单和两个 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 的显示? IE。当我选择选项 1 时,firstdiv 应该显示,后面的应该隐藏,反之亦然。

最佳答案

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

关于javascript - 使用 javascript 根据选择显示/隐藏(切换)div 的显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19491858/

相关文章:

html - DIV 的特定布局

css - 如何从 HTML 播放 Facebook 视频?

javascript - jQuery 验证 : Uncaught TypeError: $(. ..) ."valid is not a function"具有有效的引用/顺序

javascript - WebAppLocalServer 未定义(android 设备)

javascript - 如何一次打开所有 Bootstrap Accordion 选项卡

jquery - 当我将鼠标悬停在图像上时,如何使文本改变颜色

javascript - GSAP 绩效和结构

javascript - 从测试中排除文件

javascript - 单击功能 "this"不起作用

javascript - 向动态创建的元素添加 id