Display div if a specific select option value is s

2020-05-21 05:33发布

站内问答 / JavaScript
1190 7 5

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

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"

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

Here is my code:

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>

Would be glad getting help with this.

标签： javascript
举报
7条回答
唯我独甜
2楼-- · 2020-05-21 06:13

try this:

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>
查看更多
0人赞 添加讨论(0) 举报
我命由我不由天
3楼-- · 2020-05-21 06:19 
<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>

Demo: https://jsfiddle.net/kingtaherkings/swzmxkej/

查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
4楼-- · 2020-05-21 06:20

You can attach change event handler on body load event and hide/unhide <div> based on selection:

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:

<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="onload()">

jsfiddle demo

查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
5楼-- · 2020-05-21 06:22

Using this.select is incorrect.

Here is the correct code:

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";
    }
}

See the demo on JSFiddle.

查看更多
0人赞 添加讨论(0) 举报
Bombasti
6楼-- · 2020-05-21 06:26

I think you need like this

Just Change this line:

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

onchange="admSelectCheck(this);"

see Demo

查看更多
0人赞 添加讨论(0) 举报
冷血范
7楼-- · 2020-05-21 06:31

Change this.select to this:

 <select id="getFname" onchange="admSelectCheck(this);">

Then it should work okay. Also if you have jQuery you can simply do:

$("#getFname").change(function() {
   var val = $(this).text();
   if (val != "Admin") {
      $("#div").show();
   }
});

Will supply a pure JS function too.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)