Question

我是Web Design和JavaScript的新手。我在这里搜索了一下，并尝试了多种我认为可以工作的解决方案，到目前为止还没有。我正在为学校工作。我正在尝试使用JavaScript来显示包含表单的div。我的CSS文件中有两个不同的div设置为display: none。根据下拉列表的值，我想显示正确的表单。我试图输入一个脚本并尝试onchange调用，两者都没有任何反应。我甚至不会在开发者模式中看到错误。

＆＃13;

window.onload = function() {
  document.getElementById("choice").onchange = function() {
    var selection = this.value;
    if (selection == "helpRequest")
      document.getElementById('divHelpRequest').style.display = 'block';
    if (selection == "feedback")
      document.getElementById('formDiv').style.display = 'block';
  }
}

＆＃13;

<form name="surveyChoice" method="post" id="choice">
  <fieldset>
    <legend>Which Form do you Require</legend>
    <select size="1" name="choice" id="choice">
      <option>Select your form</option>
      <option value="feedback">General Feedback</option>
      <option value="helpRequest" onchange="function();">Help Request</option>
    </select>
  </fieldset>
</form>

＆＃13;

Answer 1

这里添加了两件事。首先，您必须使用elem = e.target;从jquery中提取this var。 e表示触发onchange和target的事件是触发它的元素。

然后我向你添加了一个else，如果是这样我们可以同时移动div并消失那个没有选择的那个

希望这就是你要找的东西。如果需要，很乐意解释或帮助提供更好的解决方案。

＆＃13;

window.onload = function() {
  document.getElementById("choice").onchange = function(e) {
  elem = e.target;
    var selection = elem.value;

    if (selection == "helpRequest")
      document.getElementById('divHelpRequest').style.display ='block';
    else {
    document.getElementById('divHelpRequest').style.display ='none';
    }  
    if (selection == "feedback")
      document.getElementById('formDiv').style.display = 'block';
      else {
      document.getElementById('formDiv').style.display = 'none';
      }
  }
}

＆＃13;

#divHelpRequest,
#formDiv {
  display: none;
  width: 100px;
  height: 100px;
}

#divHelpRequest {
  background-color: blue;
}

#formDiv {
  background-color: red;
}

＆＃13;

<head>
  <title>
    WSD Portal
  </title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/mystyle.css">
  <script>
  </script>
</head>


<form name="surveyChoice" method="post" id="choice">
  <fieldset>
    <legend>Which Form do you Require</legend>
    <select size="1" name="choice" id="choice">
					<option>Select your form</option>
					<option value="feedback">General Feedback</option>
					<option value="helpRequest" onchange="function();">Help Request</option>
				</select>
  </fieldset>

  <div id="divHelpRequest"></div>
  <div id="formDiv"></div>

＆＃13;

Answer 2

ID应该始终是唯一的，您也可以查看下面的代码。

window.onload = function() {
  document.getElementById("choice").onchange = function() {
    var selection = this.value;
    if (selection == "helpRequest")
      document.getElementById('divHelpRequest').style.display = 'block';
    if (selection == "feedback")
      document.getElementById('formDiv').style.display = 'block';
  }
}

<form name="surveyChoice" method="post">
  <fieldset>
    <legend>Which Form do you Require</legend>
    <select size="1" name="choice" id="choice">
      <option>Select your form</option>
      <option value="feedback">General Feedback</option>
      <option value="helpRequest">Help Request</option>
    </select>
  </fieldset>
</form>

<div id="formDiv" style="display:none;">
<h2>I am from form formDiv</h2>
</div>

<div id="divHelpRequest" style="display:none;">
<h2>I am from form divHelpRequest</h2>
</div>

Answer 3

这应该有效：

window.onload=function(){
    document.getElementById("choice").onchange=function(input) {
        var selection = input.target.value
        console.log(selection);
        if (selection == "helpRequest") 
            document.getElementById('divHelpRequest').style.display='block';
        if (selection == "feedback")
            document.getElementById('formDiv').style.display='block';
        }
    }

#divHelpRequest{
  width: 100%;
  height: 50px;
  background-color: green;
  display: none;
}

#formDiv{
  width: 100%;
  height: 50px;
  background-color: blue;
  display: none;
}

<form name="surveyChoice" method="post" id="choice">
        <fieldset>
            <legend>Which Form do you Require</legend>
            <select size="1" name="choice" id="choices">
                <option>Select your form</option>
                <option value="feedback">General Feedback</option>
                <option value="helpRequest" onchange="function();">Help Request</option>
            </select>
        </fieldset>
  
  <div id="divHelpRequest"></div>
    <div id="formDiv"></div>

此片段：

var selection = input.target.value获取输入按钮的值，我认为你被困在这里。

JavaScript不会更改显示css值

3 个答案: