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

Question

我有一个关于 PHP+HTML+Java 的问题。仅当所需文本的值为 1 时，我才需要显示带有文本区域的 div，例如: TABLE

如果 3 列是 1，那么 div 显示要放置一些文本，我如何使用 HTML 和 Java 来做到这一点？我已经尝试使用它但没有成功:

脚本

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>

问题是值必须是表中的第 1 列，并且我需要根据第 3 列中的值来显示或不显示 DIV。

我该怎么做？

真诚的，马科斯·费尔南德斯

Answer 1

试试这样 - 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";
  }
}

更新: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>

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

如果您想显示所选选项的文本；

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

}