根据输入字段设置下拉列表值
Set the Dropdown list value as per the input field
我是javascript的新手。我正在将下拉列表值推入输入字段。我做得很成功。当我试图在下拉列表中已经存在的输入字段中输入一个值时，函数调用会显示正确的值。dapartment标签下拉列表发生了变化，但子标签div下拉列表值直到我单击该div才发生变化。如何更改？如有任何帮助，将不胜感激
function fields() {
var seldprt = document.getElementById("seldprt");
var section = seldprt.value;
var dprt_input = section;
var input_Department = document.getElementById("departmentinput");
input_Department.value = dprt_input;
if (section == "Finance") {
document.getElementById("FinanceDiv").style.display = "";
document.getElementById("SalesDiv").style.display = "none";
document.getElementById("ITDiv").style.display = "none";
var subsection = document.getElementById("FinanceDiv_subcatagory");
var input_Subcatagory = document.getElementById("subcatagoryinput");
input_Subcatagory.value = sub_catagory_input;
} else if (section == "Sales") {
document.getElementById("SalesDiv").style.display = "";
document.getElementById("FinanceDiv").style.display = "none";
document.getElementById("ITDiv").style.display = "none";
var subsection = document.getElementById("SalesDiv_subcatagory");
var sub_catagory_input = subsection.value;
var input_Subcatagory = document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
} else if (section == "IT") {
document.getElementById("ITDiv").style.display = "";
document.getElementById("SalesDiv").style.display = "none";
document.getElementById("FinanceDiv").style.display = "none";
var subsection = document.getElementById("ITDiv_subcatagory");
var sub_catagory_input = subsection.value;
var input_Subcatagory = document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
}
}
function previous_values() {
var input_Department = document.getElementById("departmentinput").value;
var input_Subcatagory = document.getElementById("subcatagoryinput").value;
alert(input_Department+","+input_Subcatagory);
//seldprt.value = input_Department;
if(input_Department != null) {
alert();
var seldprt = document.getElementById("seldprt");
seldprt.value = input_Department;
var Finance_subsection = document.getElementById("FinanceDiv_subcatagory");
var Sales_subsection = document.getElementById("SalesDiv_subcatagory");
var ITDiv_subsection = document.getElementById("ITDiv_subcatagory");
if (input_Department == "Finance") {
document.getElementById("FinanceDiv_subcatagory").value = input_Subcatagory;
//Finance_subsection.value = input_Subcatagory;
//alert(Finance_subsection+"Finance_subsection");
}
if (input_Department == "Sales") {
document.getElementById("SalesDiv_subcatagory").value = input_Subcatagory;
//alert(Sales_subsection.value+"subsection value");
}
if(input_Department=="IT") {
document.getElementById("ITDiv_subcatagory").value = input_Subcatagory;
//alert(ITDiv_subsection+"subsection value");
}
//alert("if block"+seldprt.value+","+Finance_subsection.value+","+Sales_subsection.value+","+ITDiv_subsection.value);
} /* else {
var seldprt = document.getElementById("seldprt");
seldprt.value = input_Department;
alert("else block"+seldprt.value);
var Finance_subsection = document.getElementById("FinanceDiv_subcatagory");
Finance_subsection.value = input_Department;
var Sales_subsection = document.getElementById("SalesDiv_subcatagory");
Sales_subsection.value = input_Department;
var ITDiv_subsection = document.getElementById("ITDiv_subcatagory");
ITDiv_subsection.value = input_Department;
alert("else block");
} */
} <body onload="preparePage();fields();previous_values();" >
<div class="title"><%=getUserName(request)%>'s Emergency Contact</div><hr/>
<div class="instructions">Please provide the name and telephone number of a person that we may contact in case of an emergency.</div>
<div class="container" onclick="fields()">
<div onchange = "" class="departmentdiv">
<label>Department:</label>
<div align="right" class="selectdiv">
<select id = "seldprt">
<option value = "Finance">Finance</option>
<option value = "Sales">Sales</option>
<option value = "IT">IT</option>
</select>
</div>
</div>
<div id="FinanceDiv" onclick="" class="subcatagorydiv" >
<label>Section Name:</label>
<div align="right" class="selectdiv">
<select id = "FinanceDiv_subcatagory">
<option value = "Reimbursment">Reimbursment</option>
<option value = "Billing">Billing</option>
<option value = "Salaries">Salaries</option>
</select>
</div>
</div>
<div id="SalesDiv" onclick="previous_values()" class="subcatagorydiv" style="display:none;">
<label>Section Name:</label>
<div align="right" class="selectdiv">
<select id = "SalesDiv_subcatagory">
<option value = "Total Sales">Total Sales</option>
<option value = "Purchases">Purchases</option>
<option value = "BestProduct">BestProduct</option>
</select>
</div>
</div>
<div id="ITDiv" onclick="previous_values()" class="subcatagorydiv" style="display:none;" >
<label>Section Name:</label>
<div align="right" class="selectdiv">
<select id = "ITDiv_subcatagory">
<option value = "Internee">Internee</option>
<option value = "Associates">Associates</option>
<option value = "Managers">Managers</option>
</select>
</div>
</div>
</div>
<form action="" method="post" >
<div class="entry" onclick="previous_values()">Name</div>
<input type="text" name="name" id="departmentinput">
<div class="entry" onchange="previous_values()">Telephone Number</div>
<input type="text" name="telephone" id="subcatagoryinput">
<div id="readwrite_buttons" class="hide">
<button id="ok" onclick="document.forms[0].submit();return false;">OK</button>
<button id="cancel" onclick="javascript:window.close();return false;">Cancel</button>
</div>
<div id="readonly_buttons" class="hide">
<button id="back" onclick="javascript:window.close();return false;">Back</button>
</div>
</form>
</body>您需要挂接<select>元素（seldprt）上的onchange事件来调用fields()。此外，onchange事件不适用于div元素。
这是因为您已经编写了fields()来读取新值，并重新呈现DOM。老实说，我没有阅读其余的代码。
您可能已经为自己的目的编写了太多代码，但这没关系，因为您仍在学习中。我建议用最少的功能进行重写，验证每一部分是否有效，然后一次添加更多的功能。
参见固定片段：
function fields() {
var seldprt = document.getElementById("seldprt");
var section = seldprt.value;
var dprt_input = section;
var input_Department = document.getElementById("departmentinput");
input_Department.value = dprt_input;
if (section == "Finance") {
document.getElementById("FinanceDiv").style.display = "";
document.getElementById("SalesDiv").style.display = "none";
document.getElementById("ITDiv").style.display = "none";
var subsection = document.getElementById("FinanceDiv_subcatagory");
var input_Subcatagory = document.getElementById("subcatagoryinput");
input_Subcatagory.value = sub_catagory_input;
} else if (section == "Sales") {
document.getElementById("SalesDiv").style.display = "";
document.getElementById("FinanceDiv").style.display = "none";
document.getElementById("ITDiv").style.display = "none";
var subsection = document.getElementById("SalesDiv_subcatagory");
var sub_catagory_input = subsection.value;
var input_Subcatagory = document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
} else if (section == "IT") {
document.getElementById("ITDiv").style.display = "";
document.getElementById("SalesDiv").style.display = "none";
document.getElementById("FinanceDiv").style.display = "none";
var subsection = document.getElementById("ITDiv_subcatagory");
var sub_catagory_input = subsection.value;
var input_Subcatagory = document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
}
}
function previous_values() {
var input_Department = document.getElementById("departmentinput").value;
var input_Subcatagory = document.getElementById("subcatagoryinput").value;
alert(input_Department+","+input_Subcatagory);
//seldprt.value = input_Department;
if(input_Department != null) {
alert();
var seldprt = document.getElementById("seldprt");
seldprt.value = input_Department;
var Finance_subsection = document.getElementById("FinanceDiv_subcatagory");
var Sales_subsection = document.getElementById("SalesDiv_subcatagory");
var ITDiv_subsection = document.getElementById("ITDiv_subcatagory");
if (input_Department == "Finance") {
document.getElementById("FinanceDiv_subcatagory").value = input_Subcatagory;
//Finance_subsection.value = input_Subcatagory;
//alert(Finance_subsection+"Finance_subsection");
}
if (input_Department == "Sales") {
document.getElementById("SalesDiv_subcatagory").value = input_Subcatagory;
//alert(Sales_subsection.value+"subsection value");
}
if(input_Department=="IT") {
document.getElementById("ITDiv_subcatagory").value = input_Subcatagory;
//alert(ITDiv_subsection+"subsection value");
}
//alert("if block"+seldprt.value+","+Finance_subsection.value+","+Sales_subsection.value+","+ITDiv_subsection.value);
} /* else {
var seldprt = document.getElementById("seldprt");
seldprt.value = input_Department;
alert("else block"+seldprt.value);
var Finance_subsection = document.getElementById("FinanceDiv_subcatagory");
Finance_subsection.value = input_Department;
var Sales_subsection = document.getElementById("SalesDiv_subcatagory");
Sales_subsection.value = input_Department;
var ITDiv_subsection = document.getElementById("ITDiv_subcatagory");
ITDiv_subsection.value = input_Department;
alert("else block");
} */
} <body onload="preparePage();fields();previous_values();" >
<div class="title"><%=getUserName(request)%>'s Emergency Contact</div><hr/>
<div class="instructions">Please provide the name and telephone number of a person that we may contact in case of an emergency.</div>
<div class="container" onclick="fields()">
<div class="departmentdiv">
<label>Department:</label>
<div align="right" class="selectdiv">
<select onchange = "fields()" id = "seldprt">
<option value = "Finance">Finance</option>
<option value = "Sales">Sales</option>
<option value = "IT">IT</option>
</select>
</div>
</div>
<div id="FinanceDiv" onclick="" class="subcatagorydiv" >
<label>Section Name:</label>
<div align="right" class="selectdiv">
<select id = "FinanceDiv_subcatagory">
<option value = "Reimbursment">Reimbursment</option>
<option value = "Billing">Billing</option>
<option value = "Salaries">Salaries</option>
</select>
</div>
</div>
<div id="SalesDiv" onclick="previous_values()" class="subcatagorydiv" style="display:none;">
<label>Section Name:</label>
<div align="right" class="selectdiv">
<select id = "SalesDiv_subcatagory">
<option value = "Total Sales">Total Sales</option>
<option value = "Purchases">Purchases</option>
<option value = "BestProduct">BestProduct</option>
</select>
</div>
</div>
<div id="ITDiv" onclick="previous_values()" class="subcatagorydiv" style="display:none;" >
<label>Section Name:</label>
<div align="right" class="selectdiv">
<select id = "ITDiv_subcatagory">
<option value = "Internee">Internee</option>
<option value = "Associates">Associates</option>
<option value = "Managers">Managers</option>
</select>
</div>
</div>
</div>
<form action="" method="post" >
<div class="entry" onclick="previous_values()">Name</div>
<input type="text" name="name" id="departmentinput">
<div class="entry" onchange="previous_values()">Telephone Number</div>
<input type="text" name="telephone" id="subcatagoryinput">
<div id="readwrite_buttons" class="hide">
<button id="ok" onclick="document.forms[0].submit();return false;">OK</button>
<button id="cancel" onclick="javascript:window.close();return false;">Cancel</button>
</div>
<div id="readonly_buttons" class="hide">
<button id="back" onclick="javascript:window.close();return false;">Back</button>
</div>
</form>
</body>相关文章：
- 无法使用PHP动态设置下拉列表中的值
- 如何使用javascript将值引导下拉列表设置为隐藏值asp.net
- 当按下链接以在不同页面上的表单中的下拉列表中设置值时
- jQuery 设置和获取下拉列表和输入的本地存储数据
- 如何在 PHP 中使用 OnChange 事件的下拉列表中选择一个选项后，对大量数据行设置分页
- 面临从模型中为下拉列表设置值的问题
- 引导下拉列表设置所选值
- 如何通过单击链接为具有 URL 值的下拉列表设置值
- 如何根据选定的下拉列表设置
- 如何将 ASP MVC 窗体下拉列表设置为空白，但仅当基础值未初始化时
- 下拉列表设置值随肉体迅速变化
- 显示警报并将下拉列表设置为默认值
- 为已由数据库信息填充的下拉列表设置默认值.MVC 4.
- 无法在 Jquery 移动版中为动态下拉列表设置值
- 使用javascript将下拉列表设置为默认值
- 使用Angularjs为下拉列表设置不同的文本/值
- 将现有下拉列表设置为动态多选
- 当从下拉列表中选择一个值时，将其他下拉列表设置为该值's的默认值
- 如何根据下拉列表设置下拉列表的选择值
- 无法为下拉列表设置默认值
