如何根據HTML/JavaScript中的選擇值顯示錶單輸入字段？

Question

如何根據下拉選項啓用/禁用輸入字段。而且我也應該根據選擇採用JSP中的用戶數據。

<form action="../jsp/findActorbyChar.jsp"> 

<h3>Search by: 
<select name ="nameField"> </h3> 
      <option> Only FirstName </option> 
      <option> Only LastName </option> 
      <option> Or </option> 
      <option> And </option> 
      </select> 
<br><br> 
First Name <input type="text" name="firstName"/> 
Last Name <input type="text" name="lastName"/> 
<br><br> 
<input type="submit"/> 
<input type="reset"/> 

Answer 1

修改後的HTML，如下圖所示：

<h3>Search by:</h3> 
<select name ="nameField" id="nameField"> 
    <option>Only FirstName</option> 
    <option>Only LastName</option> 
    <option>Or</option> 
    <option>And</option> 
</select> 
<br><br> 
First Name <input type="text" name="firstName" id="firstNameInput"/> 
Last Name <input type="text" name="lastName" id="lastNameInput" /> 
<br><br> 
<input type="submit"/> 
<input type="reset"/> 

Javascript代碼：

var nameField = document.getElementById("nameField"); 
var firstNameInput = document.getElementById("firstNameInput"); 
var lastNameInput = document.getElementById("lastNameInput"); 

nameField.addEventListener("change", function(){ 
    //Update this to your logic... 
    if(nameField.value === "And"){ 
    firstNameInput.disabled = true; 
    lastNameInput.disabled = true; 
    } 
}); 

但我認爲，如果使用jQuery處理DOM更新會更容易些。

Answer 2

給你的菜單一個id，然後你可以通過menu.options.selectedIndex訪問選定的索引。從那裏，您可以在菜單上添加一個更改處理程序，並使用開關箱來設置菜單的禁用屬性。

<h3>Search by: 
<select id="menu" name ="nameField"> </h3> 
      <option> Only FirstName </option> 
      <option> Only LastName </option> 
      <option> Or </option> 
      <option> And </option> 
      </select> 
<br><br> 
First Name <input id="first" type="text" name="firstName"/> 
Last Name <input id="last" type="text" name="lastName"/> 
<br><br> 
<input type="submit"/> 
<input type="reset"/> 

<script type="text/javascript"> 
var menu = document.getElementById('menu'); 
var first = document.getElementById('first'); 
var last = document.getElementById('last'); 


menu.onchange = function(){ 

    var enableFirst = false, enableLast = false; 
    switch(menu.options.selectedIndex){ 
     case 0: 
      enableFirst = true; 
      enableLast = false; 
      break; 
     case 1: 
      enableFirst = false; 
      enableLast = true; 
      break; 
     case 2: 
      /*not sure which results you want here*/ 
      break; 
     case 3: 
      /*not sure which results you want here*/ 
      break; 
     default: 
      break; 

    } 
    first.disabled = !enableFirst; 
    last.disabled = !enableLast; 


} 
</script> 

Answer 3

我的代碼：仍然是所有輸入字段啓用 enter code here

<script src="script.js"> 
var nameField = document.getElementById("nameField"); 
var firstNameInput = document.getElementById("firstNameInput"); 
var lastNameInput = document.getElementById("lastNameInput"); 

nameField.addEventListener("change", function(){ 
//Update this to your logic... 
<script src="script.js"> 
var nameField = document.getElementById("nameField"); 
var firstNameInput = document.getElementById("firstNameInput"); 
var lastNameInput = document.getElementById("lastNameInput"); 

nameField.addEventListener("change", function(){ 
//Update this to your logic... 
if(nameField.value === "And"){ 
firstNameInput.disabled = true; 
lastNameInput.disabled = true; 
} 

else if(nameField.value === "firstNameInput"){ 
firstNameInput.disabled = false; 
lastNameInput.disabled = true; 
} 

else if(nameField.value === "lastNameInput"){ 
firstNameInput.disabled = true; 
lastNameInput.disabled = false; 
} 

elseif(nameField.value === "lastNameInput"){ 
firstNameInput.disabled = true; 
lastNameInput.disabled = true; 
} 

}); 

</script>