CODEWITHSUNDEEP
javascript
John
John

Reputation: 153

Display div if a specific select option value is selected

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.

Upvotes: 7

Views: 65909

Answers (7)

imtaher
imtaher

Reputation: 438

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

Upvotes: 0

Aziz Shaikh
Aziz Shaikh

Reputation: 16544

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.

Upvotes: 11

asim-ishaq
asim-ishaq

Reputation: 2230

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

Upvotes: 1

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

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

Upvotes: 2

Arun P Johny
Arun P Johny

Reputation: 388446

Try

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

And

function admSelectCheck(nameSelect)
{
    var val = nameSelect.options[nameSelect.selectedIndex].value;
    document.getElementById("admDivCheck").style.display = val == '0' ? "block" : 'none';
}

Demo: Fiddle

Upvotes: 1

Darren
Darren

Reputation: 70806

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.

Upvotes: 0

Cobra_Fast
Cobra_Fast

Reputation: 16111

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>

Upvotes: 1

Related Questions