如果选择了特定的选择选项值，则显示 div答案

【问题标题】：Display div if a specific select option value is selected如果选择了特定的选择选项值，则显示 div
【发布时间】：2013-05-18 18:06:47
【问题描述】：

如果用户从选择下拉列表中选择特定选项值，我会尝试显示 div。

例子：

选择下拉列表包含从数据库中获取的动态名称以及列表底部的一个静态或永久名称，称为“Admin”

如果用户选择的选项不是“Admin”，则显示包含特定表单元素的 div，否则如果用户选择“Admin”该 div 将保持隐藏状态

这是我的代码：

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 -

<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，我非常感谢您的回答是第一个尝试提供帮助的人。谢谢。感谢其他人，一百万！

标签： javascript

【解决方案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/

【讨论】：