如果选择了特定的选择选项值，则显示 div
Posted
技术标签:
【中文标题】如果选择了特定的选择选项值，则显示 div【英文标题】：Display div if a specific select option value is selected 【发布时间】：2013-05-18 18:06:47 【问题描述】：如果用户从选择下拉列表中选择特定选项值，我会尝试显示 div。
例子：
选择下拉列表包含从数据库中获取的动态名称以及列表底部的一个静态或永久名称，称为“Admin”
如果用户选择的选项不是“Admin”，则显示包含特定表单元素的 div，否则如果用户选择“Admin”该 div 将保持隐藏状态
这是我的代码：
<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 -
<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>
很高兴得到这方面的帮助。
【问题讨论】：
对于所有发布答案并对我的问题发表评论的人，我要说谢谢！我非常感谢你们。 @Darren Davies，我非常感谢您的回答是第一个尝试提供帮助的人。谢谢。感谢其他人，一百万！ 【参考方案1】：使用this.select是不正确的。
这是正确的代码：
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
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";
在JSFiddle 上查看演示。
【讨论】：
【参考方案2】：我觉得你需要这样的
只需更改这一行：
JS
admOptionValue = document.getElementById("getFname").value;
//alert(admOptionValue);
if(admOptionValue == 0)
document.getElementById("admDivCheck").style.display = "";
else
document.getElementById("admDivCheck").style.display = "none";
还有 HTML
onchange="admSelectCheck(this);"
see Demo
【讨论】：
【参考方案3】：试试这个：
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：
<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>
【讨论】：
【参考方案4】：试试
<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>
和
function admSelectCheck(nameSelect)
var val = nameSelect.options[nameSelect.selectedIndex].value;
document.getElementById("admDivCheck").style.display = val == '0' ? "block" : 'none';
演示：Fiddle
【讨论】：
【参考方案5】：您可以在主体 load 事件上附加更改事件处理程序，并根据选择隐藏/取消隐藏<div>：
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>
将以下代码放入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>
在body中调用onload函数：
<body onload="onload()">
jsfiddle demo
【讨论】：
【参考方案6】：将this.select 更改为this：
<select id="getFname" onchange="admSelectCheck(this);">
那么它应该可以正常工作。此外，如果您有jQuery，您可以这样做：
$("#getFname").change(function()
var val = $(this).text();
if (val != "Admin")
$("#div").show();
);
也将提供一个纯 JS 函数。
【讨论】：
@Cobra_Fast - 我说过我也会发布一个纯 JS 解决方案。 感谢您的回复。虽然我更愿意通过没有 jquery 的 javascript 来完成这项工作，但我还是会尝试这个来查看结果。谢谢..【参考方案7】：<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>
演示：https://jsfiddle.net/kingtaherkings/swzmxkej/
【讨论】：
以上是关于如果选择了特定的选择选项值，则显示 div的主要内容，如果未能解决你的问题，请参考以下文章
如果选择了特定的付款选项（woocommerce / php），则覆盖付款接收方