如果选择了特定的选择选项值,则显示div

时间:2017-04-12 09:02:24

标签: javascript php html

我有一个关于PHP + HTML + Java的问题。我需要显示一个带有textarea的div,只有当需要的文本值为1时,ex: TABLE

enter image description here

如果3列为1,则div显示放置一些文本,如何使用HTML和Java执行此操作?我已经尝试使用它但没有成功:

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>

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

我该怎么做?

此致 马科斯费尔南德斯

3 个答案:

答案 0 :(得分: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";
  }
}

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>

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

}

答案 1 :(得分:0)

尝试以下代码可以帮助您

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

这是工作的jsfiddle:https://jsfiddle.net/zsv70v2q/

答案 2 :(得分:0)

我认为这个问题需要使用php文件,所以当你选择并分配你的值时,从你的表中获取信息以了解具有该ID的第三列的值,并根据它确定div将是显示块或无。