[英]How can I show a hidden div when a select option is selected?
I want to use plain JavaScript.我想使用纯 JavaScript。 I have a drop down list ( <select><\/code> with a number of
<option><\/code> s).
我有一个下拉列表(
<select><\/code>有许多
<option><\/code> s)。
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>
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>
Try handling the change event of the select
and using this.value
to determine whether it's 'Yes' or not.尝试处理select
的 change 事件并使用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>
I think this is an appropriate solution:我认为这是一个合适的解决方案:
<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>
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);
});
}
Being more generic, passing values from calling element (which is easier to maintain).更通用,从调用元素传递值(更容易维护)。
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;"/>
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>
<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>
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>
function showDiv(divId, element) { document.getElementById(divId).style.display = element.value == 1 ? 'block' : 'none'; }<\/code><\/pre> #hidden_div { display: none; }<\/code><\/pre> <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
<\/code><\/pre>
"
take look at my solution看看我的解决方案
i want to make visaCard-note
div to be visible only if selected cardType
is visa
我想让visaCard-note
div仅在选择的cardType
是visa
时才可见
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';
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.