javascript 如果选择了特定的选择选项值，则显示 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16712941/
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
Display div if a specific select option value is selected
提问by John
I am trying to display a div if user select a specific option value from a select drop down list.
如果用户从选择下拉列表中选择特定选项值，我将尝试显示一个 div。
Example:
例子：
The select drop down list consist of dynamic names fetched from the database and also one static or permanent name at the bottom of the list called "Admin"
选择下拉列表由从数据库中获取的动态名称以及列表底部的一个名为“Admin”的静态或永久名称组成
If user select an option that's not "Admin", a div containing certain form element is shown else if the user select "Admin" that div remain hidden
如果用户选择的选项不是“管理员”，则显示包含特定表单元素的 div，否则如果用户选择“管理员”，该 div 保持隐藏
Here is my code:
这是我的代码：
Javascript -
Javascript -
<script language="javascript">
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue != 0){
document.getElementById("admDivCheck").style.display = "";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
</script>
HTML -
HTML -
<select id="getFname" onchange="admSelectCheck(this.select);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
Would be glad getting help with this.
很高兴得到这方面的帮助。
回答by Aziz Shaikh
Using this.selectis incorrect.
使用this.select不正确。
Here is the correct code:
这是正确的代码：
HTML
HTML
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
JS
JS
function admSelectCheck(nameSelect)
{
console.log(nameSelect);
if(nameSelect){
admOptionValue = document.getElementById("admOption").value;
if(admOptionValue == nameSelect.value){
document.getElementById("admDivCheck").style.display = "block";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
}
See the demo on JSFiddle.
请参阅JSFiddle上的演示。
回答by Dhaval Marthak
I think you need like this
我想你需要这样
Just Change this line:
只需更改此行：
JS
JS
admOptionValue = document.getElementById("getFname").value;
//alert(admOptionValue);
if(admOptionValue == 0){
document.getElementById("admDivCheck").style.display = "";
}
else{
document.getElementById("admDivCheck").style.display = "none";
}
And also in HTML
还有在HTML 中
onchange="admSelectCheck(this);"
onchange="admSelectCheck(this);"
回答by Cobra_Fast
try this:
试试这个：
JS:
JS：
function admSelectCheck(nameSelect)
{
if(nameSelect){
admOptionValue = nameSelect.value;
if(admOptionValue != 0){
nameSelect.style.display = "";
}
else{
nameSelect.style.display = "none";
}
}
else{
nameSelect.style.display = "none";
}
}
HTML:
HTML：
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
回答by asim-ishaq
You can attach change event handler on body loadevent and hide/unhide <div>based on selection:
您可以在正文加载事件上附加更改事件处理程序，并<div>根据选择隐藏/取消隐藏：
HTML
HTML
<select id="getFname">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
Put the following code in Head tag:
将以下代码放在 Head 标签中：
<script type="text/javascript">
function onload() {
document.getElementById("getFname").onchange = function (e) {
if (this.value == 0) {
document.getElementById("admDivCheck").style.display="";
} else {
document.getElementById("admDivCheck").style.display="none";
}
};
}
</script>
Call the onload function in body:
在body中调用onload函数：
<body onload="onload()">
回答by Arun P Johny
Try
尝试
<select id="getFname" onchange="admSelectCheck(this);">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option id="admOption" value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
And
和
function admSelectCheck(nameSelect)
{
var val = nameSelect.options[nameSelect.selectedIndex].value;
document.getElementById("admDivCheck").style.display = val == '0' ? "block" : 'none';
}
Demo: Fiddle
演示：小提琴
回答by imtaher
<select id="getFname">
<option value="1">Jay</option>
<option value="4">Sam</option>
<option value="0">Admin</option>
</select>
<div id="admDivCheck" style="display:none;">
admin selected
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$("#getFname").on("change",function(){"0"===$(this).val()?$("#admDivCheck").show():$("#admDivCheck").hide()});
</script>
回答by Darren
Change this.selectto this:
更改this.select为this：
<select id="getFname" onchange="admSelectCheck(this);">
Then it should work okay. Also if you have jQueryyou can simply do:
那么它应该可以正常工作。此外，如果你有jQuery你可以简单地做：
$("#getFname").change(function() {
var val = $(this).text();
if (val != "Admin") {
$("#div").show();
}
});
Will supply a pure JS function too.
也将提供纯 JS 函数。
