javascript - 如果选择了特定的选择选项值，则显示 div

Question

如果用户从选择下拉列表中选择特定选项值，我将尝试显示一个 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>

很高兴得到这方面的帮助。

Answer 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 上的演示.