如何根据选项框的选择显示不同的输入框？

Question

我正在尝试创建一个表单，让您可以输入您的 SAT 或 ACT 分数。一旦您选择了您参加的考试，它应该会根据您选择的考试是 SAT 还是 ACT 显示不同的后续问题。这是我到目前为止所拥有的。它几乎可以工作，但不完全。这是我的代码。下拉框工作正常，但我无法显示后续问题。任何帮助将不胜感激。

这是数据库的简化版本：

• “test_id”“test_name”“test_type”
• 1“2017 年 6 月 ACT”“ACT”
• 2“2017 年 4 月 ACT”“ACT”
• 3“2017 年 6 月 SAT”“SAT”
• 4“2017 年 5 月 SAT”“SAT”

下拉框显示 test_name，并将 test_id 作为 value，将 test_type 作为 rel。

function test_scores() {
  var test_type = document.getElementById('test_name').rel;
  if (test_type = "ACT") {
    act_scores.style.display = "block";
  }
  if (test_type = "SAT") {
    sat_scores.style.display = "block";
  }
}

.act_scores {
  display: none;
  /* Hidden by default */
}

.sat_scores {
  display: none;
  /* Hidden by default */
}

<form id="msform" onSubmit="return validate();" action="" class="form" method="post" accept-charset="utf-8">
  <h2 class="page-title legend">Score Information</h2>
  <hr>
  <div class="row">
    <div class="col-sm-6">
      <div class="form-group" style="margin-top:20px;"><label>Add Scores:</label>
        <div class="select span5 no-float noMarginLeft">
          <select name="test_name" id="test_name" onchange=test_scores() required="required" style="width:100%;background:#fff;">
        <option value="">Test:</option>
        <option value="1" rel="SAT">Jun 2017 SAT</option>
        <option value="2" rel="ACT">Jun 2017 ACT</option>
        <option value="3" rel="SAT">May 2017 SAT</option>
        <option value="4" rel="ACT">Apr 2017 ACT</option>
          /* php code that is working */
        </select>
        </div>
      </div>
    </div>
    <div id="my_act_scores" class="act_scores">
      <div class="scores-content">
        <span class="close">×</span>
        <label>English:<span style="color: red;width: 20px;">*</span></label>
        <textarea name="act_english" rows="1" class="form-control" required="required" id="act_english"></textarea>
      </div>
      <div class="scores-content">
        <label>Math:<span style="color: red;width: 20px;">*</span></label>
        <textarea name="act_math" rows="1" class="form-control" required="required" id="act_math"></textarea>
      </div>
      <div class="scores-content">
        <label>Reading:<span style="color: red;width: 20px;">*</span></label>
        <textarea name="act_reading" rows="1" class="form-control" required="required" id="act_reading"></textarea>
      </div>
      <div class="scores-content">
        <label>Science:<span style="color: red;width: 20px;">*</span></label>
        <textarea name="act_science" rows="1" class="form-control" required="required" id="act_science"></textarea>
      </div>
      <div class="scores-content">
        <label>&nbsp;</label>
        <button type="submit" name="act_submit" class="btn btn-green black">Submit</button>
        <span id="info"></span></div>
    </div>
    <div id="my_sat_scores" class="sat_scores">
      <div class="scores-content">
        <span class="close">×</span><label>Reading (out of 40):<span style="color: red;width: 20px;">*</span></label>
        <textarea name="sat_reading" rows="1" class="form-control" required="required" id="sat_reading"></textarea>
      </div>
      <div class=" scores-content ">
        <label>Writing (out of 40):<span style="color: red;width: 20px; ">*</span></label>
        <textarea name="sat_writing " rows="1 " class="form-control " required="required " id="sat_writing "></textarea>
      </div>
      <div class="scores-content">
        <label>Math (out of 40):<span style="color: red;width: 20px; ">*</span></label>
        <textarea name="sat_math" rows="1" class="form-control" required="required" id="sat_math"></textarea>
      </div>
      <div class="scores-content ">
        <label>&nbsp;</label>
        <button type="sat_submit" name="submit" class="btn btn-green black ">Submit</button><span id="info"></span>
      </div>
    </div>
  </div>
</form>

Answer 1

你必须抓取 dom 中的元素来设置样式：

function test_scores(event) {
  var testTypeSelect = event.target;
  var test_type = testTypeSelect.options[testTypeSelect .selectedIndex].getAttribute('rel')
  if (test_type == "ACT") {
    document.getElementById('my_act_scores').style.display = "block";
    document.getElementById('my_sat_scores').style.display = "none";
  }
  if (test_type == "SAT") {
    document.getElementById('my_sat_scores').style.display = "block";
    document.getElementById('my_act_scores').style.display = "none";
  }
}
--//and
<select name="test_name" id="test_name" onchange=test_scores(event)