【发布时间】：2015-12-11 03:24:49
【问题描述】：
在这段代码中，我有 2 个下拉列表。一个是部门，另一个是部门名称。根据部门，我正在相应地更改我的部分名称，然后将这两个下拉列表的值推送到我的表单输入中。
问题在于，如果您仅使用键盘（制表键和箭头键），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>【问题讨论】：
-
这个 sn-p 像 Firefox 中描述的那样工作，更新文本输入以匹配选择框中选择的任何内容。您能否验证 Firefox 中的 sn-p 是否已损坏？
-
如果您使用鼠标，它可以正常工作，但是当使用键盘（使用 tab 和箭头键）时，它在 firefox 中不起作用。
-
啊，在 Firefox 中，onchange 直到框失去焦点才会被触发。这是他们的预期行为。见这里：bugzilla.mozilla.org/show_bug.cgi?id=296125
-
有什么办法可以解决这个问题？
标签： javascript html firefox