CODEWITHSUNDEEP
javascriptphphtml
Marcos Fernandes
Marcos Fernandes

Reputation: 11

Display div if a specific select option value is selected

I have one question regardinh PHP+HTML+Java. I need to display a div with textarea only when a value if text required is 1, ex: TABLE

enter image description here

If the 3 columns are 1, then the div show to put some text, how can I do this with HTML and Java? I already try to use this without success:

SCRIPT

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

The problem is that the Value must be the column 1 from my table, and I need the DIV to show or not according to value in my column 3.

How can I do this?

Sincerely, Marcos Fernandes

Upvotes: 1

Views: 2468

Answers (3)

Osama
Osama

Reputation: 3030

I think that this question requires work with php file so when you select and assign your value get information from your table to know the value of the third column with that ID and according to it you determine that div will be display block or none.

Upvotes: 0

MakeLoveNotWar
MakeLoveNotWar

Reputation: 954

Try it like this - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_onchange

function admSelectCheck() { 
  var x = document.getElementById("getFname").value;
  if(x == 0) {
    document.getElementById("admDivCheck").style.display = "block";
  }else{
    document.getElementById("admDivCheck").style.display = "none";
  }
}

upd: html

<style>
 .thediv { display: none; } 
</style>
<select id="getFname" onchange="admSelectCheck()">
  <option value="1">Vendor will send Credit Note (requires text)</option>
  <option value="2">Return to supplier </option>
  <option value="3">Accept diversion (requires text)</option>
</select>
<div id="1" class="thediv">1</div>
<div id="2" class="thediv">2</div>
<div id="3" class="thediv">3</div>

and js

function admSelectCheck() {
 var selectedValue = document.getElementById("getFname").value;
 var divs = document.getElementsByClassName("thediv");
 for (i = 0; i < divs.length; i++) {
   divs[i].style.display = "none";
 }
 document.getElementById(selectedValue).style.display = "block";
}

If you want to show text of the selected option;

<select id="getFname" onchange="admSelectCheck()">
  <option value="1">Vendor will send Credit Note (requires text)</option>
  <option value="2">Return to supplier </option>
  <option value="3">Accept diversion (requires text)</option>
</select>
<div id="TextGoesHere">default text</div>

  function admSelectCheck() {
   //get select element by id
   var select = document.getElementById("getFname");
   // get selected option value
   var value = select.value;
   // get selected option text
   var optionText = select.options[select.selectedIndex].text;
   // replace html of the div to the text of selected option
   document.getElementById("TextGoesHere").innerHTML = optionText;
   //or for a specific cases
   if(value == 3) {
      document.getElementById("admDivCheck").innerHTML = 'the value is 3';
   }

}

Upvotes: 1

selvarajmas
selvarajmas

Reputation: 1643

try following code should help you

<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>
<script>
  function admSelectCheck(obj)
  {
    var nameSelect = obj.value;
    console.log(nameSelect);
    if(nameSelect){
      admOptionValue = document.getElementById("admOption").value;
      if(admOptionValue == nameSelect){
        document.getElementById("admDivCheck").style.display = "block";
      }
      else{
        document.getElementById("admDivCheck").style.display = "none";
      }
    }
    else{
      document.getElementById("admDivCheck").style.display = "none";
    }
  }
</script>

Here is the working jsfiddle:https://jsfiddle.net/zsv70v2q/

Upvotes: 0

Related Questions