根据下拉菜单中的选择更改 div 的内容
Posted
技术标签:
【中文标题】根据下拉菜单中的选择更改 div 的内容【英文标题】：Change the content of a div based on selection from dropdown menu 【发布时间】：2011-09-04 02:29:54 【问题描述】：有没有一种简单的方法，使用 javascript，根据用户从下拉菜单中的选择动态显示/隐藏 <div> 中的内容？例如，如果用户选择 option 1，那么我希望显示 <div> 1 并隐藏所有其他 <div>s。
编辑：示例html 设置
<select>
<option> Option 1</option>
<option> Option 2</option>
<option> Option 3</option>
<select>
<div id="content_1" style="display:hidden;">Content 1<div>
<div id="content_2" style="display:hidden;">Content 2<div>
<div id="content_3" style="display:hidden;">Content 3<div>
【问题讨论】：
是的。如果你展示你到目前为止所拥有的东西，你可能会得到一些帮助。更明智的做法是学习 Javascript 和 DOM 的基础知识并学会自己编写，而不是依赖剪切和粘贴代码。 嗯，我真的只是在寻找一种技术。如果您阅读了我的问题，我认为我要求的不是剪切/粘贴代码，只是一种方法。 方法是在下拉菜单中为change事件创建一个监听器，然后相应地更改每个div元素的display样式属性。
【参考方案1】：
接受的答案有几个缺点：
不要在 JavaScript 代码中定位 ID。使用avoid repeating your code 的类和数据属性。 在加载时使用 CSS 而不是使用 JavaScript 隐藏是一种很好的做法，以支持非 JavaScript 用户，并防止加载时显示隐藏闪烁。考虑到上述情况，您的选项甚至可以有不同的值，但切换同一个类：
<select class="div-toggle" data-target=".my-info-1">
<option value="orange" data-show=".citrus">Orange</option>
<option value="lemon" data-show=".citrus">Lemon</option>
<option value="apple" data-show=".pome">Apple</option>
<option value="pear" data-show=".pome">Pear</option>
</select>
<div class="my-info-1">
<div class="citrus hide">Citrus is...</div>
<div class="pome hide">A pome is...</div>
</div>
jQuery:
$(document).on('change', '.div-toggle', function()
var target = $(this).data('target');
var show = $("option:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
);
$(document).ready(function()
$('.div-toggle').trigger('change');
);
CSS：
.hide
display: none;
这里是a JSFiddle，看看它的实际应用。
【讨论】：
我的那个似乎不起作用的任何原因？ jsfiddle.net/fuvxkzkd - 奇怪的是，在我的本地站点上运行的版本似乎可以部分工作，但是如果选择了另一个选项元素，它不会将“隐藏”类添加到选项元素中，所以它只是添加到行列表中显示 @Lee 如果你检查你的 JavaScript 控制台，你会看到$ is not defined，这意味着你的小提琴上没有加载 jQuery。在 JSFiddle 上，将 https://code.jquery.com/jquery-1.11.3.js 添加到左侧的外部资源中。
啊。哇我觉得很愚蠢，我以为 JSfiddle 自动包含它。好的，那会好的。顺便说一句，我设法让我的本地版本也能正常工作，谢谢。【参考方案2】：
here is a jsfiddle 通过选择显示/隐藏 div 的示例。
HTML：
<div id="option1" class="group">asdf</div>
<div id="option2" class="group">kljh</div>
<div id="option3" class="group">zxcv</div>
<div id="option4" class="group">qwerty</div>
<select id="selectMe">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
</select>
jQuery:
$(document).ready(function ()
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function ()
$('.group').hide();
$('#'+$(this).val()).show();
)
);
【讨论】：
jsfiddle 不起作用！返回 404。顺便说一句，jquary 需要任何编译器？【参考方案3】：零 jQuery
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
.inv
display: none;
</style>
<body>
<select id="target">
<option value="">Select...</option>
<option value="content_1">Option 1</option>
<option value="content_2">Option 2</option>
<option value="content_3">Option 3</option>
<select>
<div id="content_1" class="inv">Content 1</div>
<div id="content_2" class="inv">Content 2</div>
<div id="content_3" class="inv">Content 3</div>
<script>
document
.getElementById('target')
.addEventListener('change', function ()
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null)
vis.className = 'inv';
if (target !== null )
target.className = 'vis';
);
</script>
</body>
</html>
代码笔
document
.getElementById('target')
.addEventListener('change', function ()
'use strict';
var vis = document.querySelector('.vis'),
target = document.getElementById(this.value);
if (vis !== null)
vis.className = 'inv';
if (target !== null )
target.className = 'vis';
);.inv
display: none;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<select id="target">
<option value="">Select...</option>
<option value="content_1">Option 1</option>
<option value="content_2">Option 2</option>
<option value="content_3">Option 3</option>
<select>
<div id="content_1" class="inv">Content 1</div>
<div id="content_2" class="inv">Content 2</div>
<div id="content_3" class="inv">Content 3</div>
</body>
</html>【讨论】：
【参考方案4】：嗯，太慢了。无论如何，这是我的例子:)http://jsfiddle.net/cqDES/
$(function()
$('select').change(function()
var val = $(this).val();
if (val)
$('div:not(#div' + val + ')').slideUp();
$('#div' + val).slideDown();
else
$('div').slideDown();
);
);
【讨论】：
可能想在你的小提琴中隐藏加载的元素。 @rybo111 是的，我可以，但是如果你选择空选项，它会再次显示它们，所以它可能是一个功能。 OP 在他的问题中将它们隐藏起来，所以这是想要的效果。【参考方案5】：我不是程序员，但你可以省下几行代码：
<div>
<select onchange="if(selectedIndex!=0)document.getElementById('less_is_more').innerHTML=options[selectedIndex].value;">
<option value="">hire me for real estate</option>
<option value="me!!!">Who is a good Broker? </option>
<option value="yes!!!">Can I buy a house with no down payment</option>
<option value="send me a note!">Get my contact info?</option>
</select>
</div>
<div id="less_is_more"></div>
这里是demo。
【讨论】：
【参考方案6】：有很多方法可以执行您的任务，但我相信最优雅的是使用 css。 以下是基本步骤
-
侦听选项选择事件，向容器操作添加/删除某些类，其中包含您感兴趣的所有 div（例如，正文）
添加样式以隐藏除一个以外的所有 div。
干得好，先生。
如果有几个 div，这会很有效，因为要切换的元素越多，就应该编写更多的 css 规则。这是更通用的解决方案，绑定操作，基于以下步骤： 1. 使用一些选择器查找所有元素（通常看起来像'.menu-container .menu-item'） 2.找到找到的元素之一，它是当前可见的，隐藏它 3. 使另一个元素可见，即您希望在新环境下可见的元素。
javascript 它是一种相当流行的语言）
【讨论】：
以上是关于根据下拉菜单中的选择更改 div 的内容的主要内容，如果未能解决你的问题，请参考以下文章