Javascript 根据下拉菜单中的选择更改 div 的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6164507/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the content of a div based on selection from dropdown menu
提问by Thomas
Is there a simple way, using JavaScript, to dynamically show/hide content in a <div>based on the users selection from a drop down menu? For example, if a user selects option 1then I would like <div>1 to be displayed and all other <div>s to be hidden.
有没有一种简单的方法，使用 JavaScript，<div>根据用户从下拉菜单中的选择动态显示/隐藏内容？例如，如果用户选择option 1然后我希望<div>显示 1 并<div>隐藏所有其他s。
EDIT: Example HTMLSetup
编辑：示例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>
采纳答案by nathan gonzalez
here is a jsfiddlewith an example of showing/hiding div's via a select.
这是一个 jsfiddle，其中包含通过选择显示/隐藏 div 的示例。
HTML:
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:
jQuery：
$(document).ready(function () {
$('.group').hide();
$('#option1').show();
$('#selectMe').change(function () {
$('.group').hide();
$('#'+$(this).val()).show();
})
});
回答by rybo111
The accepted answer has a couple of shortcomings:
接受的答案有几个缺点：
- Don't target IDs in your JavaScript code. Use classes and data attributes to avoid repeating your code.
- It is good practice to hide with CSS on load rather than with JavaScript—to support non-JavaScript users, and prevent a show-hide flicker on load.
- 不要在 JavaScript 代码中定位 ID。使用类和数据属性来避免重复您的代码。
- 在加载时使用 CSS 隐藏而不是使用 JavaScript 是一种很好的做法——以支持非 JavaScript 用户，并防止加载时显示隐藏闪烁。
Considering the above, your options could even have different values, but toggle the same class:
考虑到上述情况，您的选项甚至可以有不同的值，但切换相同的类：
<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:
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:
CSS：
.hide {
display: none;
}
Here's a JSFiddleto see it in action.
这是一个 JSFiddle来查看它的运行情况。
回答by Ivan Ivanov
With zero jQuery
零 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>
回答by Andy
Meh too slow. Here's my example anyway :)
http://jsfiddle.net/cqDES/
嗯太慢了。无论如何，这是我的例子:)
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();
}
});
});
回答by user2060451
I am not a coder, but you could save a few lines:
我不是编码员，但您可以节省几行：
<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>
Here is demo.
这是演示。
回答by shabunc
There are many ways to perform your task, but the most elegant are, I believe, using css. Here are basic steps
有很多方法可以执行您的任务，但我相信最优雅的方法是使用 css。以下是基本步骤
- Listening option selection event, biding adding/removing some class to container action, which contains all divs you are interested in (for example, body)
- Adding styles for hiding all divs except one.
- Well done, sir.
- 监听选项选择事件，投标添加/删除某些类到容器动作，其中包含您感兴趣的所有 div（例如，正文）
- 添加用于隐藏除一个之外的所有 div 的样式。
- 干得好，先生。
This works pretty well if there a few divs, since more elements you want to toggle, more css rules should be written. Here is more general solution, binding action, base on following steps: 1. find all elements using some selector (usually it looks like '.menu-container .menu-item') 2. find one of found elements, which is current visible, hide it 3. make visible another element, the one you desire to be visible under new circumstances.
如果有几个 div，这很有效，因为要切换的元素越多，应该编写更多的 css 规则。这是更通用的解决方案，绑定操作，基于以下步骤： 1. 使用某个选择器查找所有元素（通常看起来像 '.menu-container .menu-item'） 2. 找到找到的元素之一，这是当前可见的, 隐藏它 3. 使另一个元素可见，即您希望在新情况下可见的元素。
javascript it a rather timtoady language )
javascript 它是一种相当 timtoady 的语言）
