如何根据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>