我是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>
答案 0 :(得分：0)
您需要在onchange元素（seldprt）上挂钩<select>事件以致电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>