如果选择了特定的选择选项值，则显示div [英] Display div if a specific select option value is selected

问题描述

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

I am trying to display a div if user select a specific option value from a select drop down list.

示例：

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

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的选项，则如果用户选择Admin表示div保持隐藏，则会显示包含特定表单元素的div。

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

这是我的代码：

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 -

<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>

很乐意获得帮助。

推荐答案

使用 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 。

这篇关于如果选择了特定的选择选项值，则显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！