onchange事件在Firefox中不起作用

Question

在这段代码中，我有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> 

Answer 1

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>