Html javascript在选择选项时显示隐藏的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16015933/
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
javascript show hidden div when select option is selected
提问by twigg
Ok I've been searching for answers to this for a while but everything I come across (even when searching for javascript) comes up with jQuery! does nobody use plain javascript anymore?!?
好的，我一直在寻找这个问题的答案，但我遇到的一切（即使在搜索 javascript 时）都来自 jQuery！没有人再使用普通的javascript了吗？！？
So what I want, I have a drop down list (select with a number of options). When a certain option is selected I want a hidden div to display.
所以我想要什么，我有一个下拉列表（选择多个选项）。选择某个选项时，我希望隐藏的div显示。
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1" onClick"showDiv()">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
Then I'm trying it with this javascript code:
然后我用这个 javascript 代码尝试它：
function showDiv(){
document.getElementById('hidden_div').style.display = "block";
}
I'm guessing my problem is with the onClick trigger in my options but I'm unsure on what else to use? Or I could be completely off with this one (note to self get a good javascript book!)
我猜我的问题是我的选项中的 onClick 触发器，但我不确定还能使用什么？或者我可以完全放弃这个（注意自己得到一本好的 javascript 书！）
回答by Mihai Matei
try this:
尝试这个：
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none';
}#hidden_div {
display: none;
}<select id="test" name="form_select" onchange="showDiv('hidden_div', this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div">This is a hidden div</div>回答by Daniel Imms
Try handling the change event of the selectand using this.valueto determine whether it's 'Yes' or not.
尝试处理select和 using的更改事件this.value以确定它是否为“是”。
JS
JS
document.getElementById('test').addEventListener('change', function () {
var style = this.value == 1 ? 'block' : 'none';
document.getElementById('hidden_div').style.display = style;
});
HTML
HTML
<select id="test" name="form_select">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
回答by Amranur Rahman
I think it is appropriate:
我认为是合适的：
<select id="test" name="form_select" onchange="showDiv(this)">
<option value="0">No</option>
<option value="1">Yes</option>
</select>
<div id="hidden_div" style="display:none;">Hello hidden content</div>
<script type="text/javascript">
function showDiv(select){
if(select.value==1){
document.getElementById('hidden_div').style.display = "block";
} else{
document.getElementById('hidden_div').style.display = "none";
}
}
</script>
Try this , it would perfectly work. Thanks
试试这个，它会完美地工作。谢谢
回答by Ja?ck
You should hook onto the change event of the <select>element instead of on the individual options.
您应该挂钩<select>元素的更改事件而不是单个选项。
var select = document.getElementById('test'),
onChange = function(event) {
var shown = this.options[this.selectedIndex].value == 1;
document.getElementById('hidden_div').style.display = shown ? 'block' : 'none';
};
// attach event handler
if (window.addEventListener) {
select.addEventListener('change', onChange, false);
} else {
// of course, IE < 9 needs special treatment
select.attachEvent('onchange', function() {
onChange.apply(select, arguments);
});
}
回答by GlennG
Being more generic, passing values from calling element (which is easier to maintain).
更通用，从调用元素传递值（更容易维护）。
- Specify the start condition in the text field (display:none)
- Pass the required option value to show/hide on ("Other")
- Pass the target and field to show/hide ("TitleOther")
- 在文本字段中指定开始条件（显示：无）
- 传递所需的选项值以显示/隐藏（“其他”）
- 传递目标和字段以显示/隐藏（“TitleOther”）
function showHideEle(selectSrc, targetEleId, triggerValue) {
if(selectSrc.value==triggerValue) {
document.getElementById(targetEleId).style.display = "inline-block";
} else {
document.getElementById(targetEleId).style.display = "none";
}
} <select id="Title"
onchange="showHideEle(this, 'TitleOther', 'Other')">
<option value="">-- Choose</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Miss">Miss</option>
<option value="Other">Other --></option>
</select>
<input id="TitleOther" type="text" title="Title other" placeholder="Other title"
style="display:none;"/>回答by Obaidul Haque
Check this code. It awesome code for hide div using select item.
检查此代码。使用选择项隐藏 div 的代码很棒。
HTML
HTML
<select name="name" id="cboOptions" onchange="showDiv('div',this)" class="form-control" >
<option value="1">YES</option>
<option value="2">NO</option>
</select>
<div id="div1" style="display:block;">
<input type="text" id="customerName" class="form-control" placeholder="Type Customer Name...">
<input type="text" style="margin-top: 3px;" id="customerAddress" class="form-control" placeholder="Type Customer Address...">
<input type="text" style="margin-top: 3px;" id="customerMobile" class="form-control" placeholder="Type Customer Mobile...">
</div>
<div id="div2" style="display:none;">
<input type="text" list="cars" id="customerID" class="form-control" placeholder="Type Customer Name...">
<datalist id="cars">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
<option>Value 4</option>
</datalist>
</div>
JS
JS
<script>
function showDiv(prefix,chooser)
{
for(var i=0;i<chooser.options.length;i++)
{
var div = document.getElementById(prefix+chooser.options[i].value);
div.style.display = 'none';
}
var selectedOption = (chooser.options[chooser.selectedIndex].value);
if(selectedOption == "1")
{
displayDiv(prefix,"1");
}
if(selectedOption == "2")
{
displayDiv(prefix,"2");
}
}
function displayDiv(prefix,suffix)
{
var div = document.getElementById(prefix+suffix);
div.style.display = 'block';
}
</script>
回答by Pankaj Upadhyay
<select id="test" name="form_select" onchange="showDiv()">
<option value="0">No</option>
<option value ="1">Yes</option>
</select>
<div id="hidden_div" style="display: none;">Hello hidden content</div>
<script>
function showDiv(){
getSelectValue = document.getElementById("test").value;
if(getSelectValue == "1"){
document.getElementById("hidden_div").style.display="block";
}else{
document.getElementById("hidden_div").style.display="none";
}
}
</script>
回答by vicky
you can use the following common function.
您可以使用以下常用功能。
<div>
<select class="form-control"
name="Extension for area validity sought for"
onchange="CommonShowHide('txtc1opt2', this, 'States')"
>
<option value="All India">All India</option>
<option value="States">States</option>
</select>
<input type="text"
id="txtc1opt2"
style="display:none;"
name="Extension for area validity sought for details"
class="form-control"
value=""
placeholder="">
</div>
<script>
function CommonShowHide(ElementId, element, value) {
document
.getElementById(ElementId)
.style
.display = element.value == value ? 'block' : 'none';
}
</script>
回答by Basheer AL-MOMANI
take look at my solution
看看我的解决方案
i want to make visaCard-notediv to be visible only if selected cardTypeis visa
我要让visaCard-notediv来才可以看到，如果选择cardTypeISvisa
and here is the html
这是 html
<select name="cardType">
<option value="1">visa</option>
<option value="2">mastercard</option>
</select>
here is the js
这是js
var visa="1";//visa is selected by default
$("select[name=cardType]").change(function () {
document.getElementById('visaCard-note').style.visibility = this.value==visa ? 'visible' : 'hidden';
})
