如何根據選項框中的選擇顯示不同的輸入框？

Question

我正在嘗試創建一個表格，允許您輸入SAT或ACT分數。 選擇要參加的考試后，它會根據您選擇的考試是SAT還是ACT顯示不同的后續問題。 這是我到目前為止所擁有的。 它幾乎可以正常工作，但還不能完全正常。 這是我的代碼。 下拉框工作正常，但我無法顯示后續問題。 任何幫助將非常感激。

這是數據庫的簡化版本：

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

下拉框顯示test_name，並捕獲test_id作為值，並捕獲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)