在这段代码中我有2个下拉列表。一个是部门，另一个是部门名称。在部门的基础上，我相应地更改我的部分名称，然后将这两个下拉列表的值推送到我的表格输入中。
问题是如果你只使用键盘（tab键和箭头键），onchange事件在chrome中工作正常但在firefox中没有。如何在不添加jquery的情况下修复此问题？
function fields(){
var seldprt = document.getElementById("seldprt");//seldprt is for Department
var section = seldprt.value;//assigning the value of Department dropdown list to section variable
var dprt_input=section;
var input_Department=document.getElementById("departmentinput");
input_Department.value=dprt_input;
if(section=="REGULATORY")
{
document.getElementById("LEGALDiv").style.display="none";
document.getElementById("REGDiv").style.display="";
var subsection=document.getElementById("REGDiv_subcatagory");
var sub_catagory_input=subsection.value;
var input_Subcatagory=document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
}
else if(section=="LEGAL")
{
document.getElementById("LEGALDiv").style.display="";
document.getElementById("REGDiv").style.display="none";
var subsection=document.getElementById("LEGALDiv_subcatagory");
var sub_catagory_input=subsection.value;
var input_Subcatagory=document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
}
}<div class="departmentdiv" onclick="fields()"><!-- here the function field is called on onclick event -->
<label>Department Name:</label>
<div align="right" class="selectdiv">
<select id = "seldprt" onfocus="fields();" onchange="fields();" onkeypress="fields();">
<option value = "LEGAL">LEGAL</option>
<option value = "REGULATORY">REGULATORY</option>
</select>
</div>
</div>
<div id="REGDiv" class="subcatagorydiv" style="display:none" >
<label>Section Name:</label>
<div align="right" class="selectdiv">
<select id = "REGDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeypress="fields()">
<option value = "GLT">GLT</option>
<option value = "REGULATORY">REGULATORY</option>
</select>
</div>
</div>
<div id="LEGALDiv" class="subcatagorydiv" style="display:none" >
<label>Section Name:</label>
<div align="right" class="selectdiv" >
<select id = "LEGALDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeypress="fields()">
<option value = "GLT">GLT</option>
<option value = "LEGAL">LEGAL</option>
</select>
</div>
</div>
<form action="" method="post" >
<div class="entry" onclick="previous_values()" style="">Name</div>
<input type="text" style="" name="name" id="departmentinput">
<div class="entry" style="" onclick="previous_values()">Section Number</div>
<input type="text" style="" name="Section" 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>
答案 0 :(得分：0)
onkeyup事件应该做你想做的事情。它可能会产生很多事件，所以我会仔细考虑它是否真的有必要。我看到你在你的片段中尝试过onkeypress事件。由于我不知道的原因，至少在Firefox中，它似乎没有捕获向上/向下箭头而onkeyup和onkeydown显然。
function fields(){
var seldprt = document.getElementById("seldprt");//seldprt is for Department
var section = seldprt.value;//assigning the value of Department dropdown list to section variable
var dprt_input=section;
var input_Department=document.getElementById("departmentinput");
input_Department.value=dprt_input;
if(section=="REGULATORY")
{
document.getElementById("LEGALDiv").style.display="none";
document.getElementById("REGDiv").style.display="";
var subsection=document.getElementById("REGDiv_subcatagory");
var sub_catagory_input=subsection.value;
var input_Subcatagory=document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
}
else if(section=="LEGAL")
{
document.getElementById("LEGALDiv").style.display="";
document.getElementById("REGDiv").style.display="none";
var subsection=document.getElementById("LEGALDiv_subcatagory");
var sub_catagory_input=subsection.value;
var input_Subcatagory=document.getElementById("subcatagoryinput");
input_Subcatagory.value=sub_catagory_input;
}
}<div class="departmentdiv" onclick="fields()"><!-- here the function field is called on onclick event -->
<label>Department Name:</label>
<div align="right" class="selectdiv">
<select id = "seldprt" onfocus="fields();" onchange="fields();" onkeypress="fields();">
<option value = "LEGAL">LEGAL</option>
<option value = "REGULATORY">REGULATORY</option>
</select>
</div>
</div>
<div id="REGDiv" class="subcatagorydiv" style="display:none" >
<label>Section Name:</label>
<div align="right" class="selectdiv">
<select id = "REGDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeyup="fields()">
<option value = "GLT">GLT</option>
<option value = "REGULATORY">REGULATORY</option>
</select>
</div>
</div>
<div id="LEGALDiv" class="subcatagorydiv" style="display:none" >
<label>Section Name:</label>
<div align="right" class="selectdiv" >
<select id = "LEGALDiv_subcatagory" onfocus="fields()" onchange="fields()" onkeyup="fields()">
<option value = "GLT">GLT</option>
<option value = "LEGAL">LEGAL</option>
</select>
</div>
</div>
<form action="" method="post" >
<div class="entry" onclick="previous_values()" style="">Name</div>
<input type="text" style="" name="name" id="departmentinput">
<div class="entry" style="" onclick="previous_values()">Section Number</div>
<input type="text" style="" name="Section" 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>