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访问所选索引。从那里，您可以在菜单中添加一个on change处理程序，并使用switch case设置菜单的disabled属性。

<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>

如何根据html / JavaScript中的选择值显示表单输入字段？

3 个答案: