JavaScript无法在IE8中使用
[英]Javascript will not work in IE8
问题描述
The following Javascript will not work in IE8 but works well in FF, Safari, IE9, and Chrome. 
以下Javascript无法在IE8中使用，但在FF，Safari，IE9和Chrome中可以正常使用。 I admit to being a noobie with Javascript and I have spent 2 days looking for a solution with no luck. 我承认自己是Java语言的入门者，并且花了两天时间寻找没有运气的解决方案。 IE8 does not like the toggle function or the hide. IE8不喜欢切换功能或隐藏。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
.hide {
display: none;
}
</style>
<script type="text/javascript">
function toggleField(evt) {
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
var block = document.getElementById("specialty");
if (target.id == "fieldFlag1") {
block.style.display = "block";
} else {
block.style.display = "none";
}
}
</script>
</head>
<body>
<div id="profession">
Field of professional work (as applicable):
<select size="1" name="profession">
<option>-- Choose One --</option>
<option value="Architecture">Architecture</option>
<option value="FineArts">Arts, Fine</option>
<option value="PerformingArts">Arts, Performing</option>
<option value="Business">Business</option>
<option value="Consulting">Consulting</option>
<option value="Counseling">Counseling</option>
<option value="Dentistry">Dentistry</option>
<option value="Education">Education</option>
<option value="Engineering">Engineering</option>
<option value="Environment">Environment</option>
<option value="Finance">Finance</option>
<option value="Government">Government</option>
<option value="Healthcare—NonMedical">Healthcare—Non Medical</option>
<option value="HigherEducation">Higher Education</option>
<option value="InformationTechnology">Information Technology</option>
<option value="Law">Law</option>
<option value="Marketing">Marketing</option>
<option value="Media/Communications">Media/Communications</option>
<option value="Medicine">Medicine</option>
<option value="Military">Military</option>
<option value="Music">Music</option>
<option value="NonProfit">Non Profit</option>
<option value="Nursing" id="fieldFlag1" onclick="toggleField(event)">Nursing</option>
<option value="PublicService">Public Service</option>
<option value="Science/Research">Science/Research</option>
<option value="SocialServices">Social Services</option>
<option value="Sports">Sports</option>
<option value="Trade/Craft">Trade/Craft</option>
</select>
</div>
<div id="specialty" class="hide">
Choose Specialty:
<select name="Specialty" size="1">
<option value="nursing">Nursing</option>
<option value="nurse Practitioner Unspecified">Nurse·Practitioner·Unspecified</option>
<option value="nurse inactive">Nurse·Inactive</option>
<option value="womens health">Womens·Health</option>
<option value="administration">Administration</option>
<option value="hospital">Hospital</option>
<option value="critical care">Critical·Care</option>
<option value="home health">Home·Health</option>
<option value="surgical">Surgical</option>
<option value="clinical Research">Clinical·Research</option>
<option value="family health">Family·Health</option>
<option value="acute care nursing">Acute·Care·Nursing</option>
<option value="community Health Nursing">Community·Health·Nursing</option>
<option value="emergency nursing">Emergency·Nursing</option>
<option value="nurse practitioner: adult health">Nurse·Practitioner:·Adult·Health</option>
<option value="nurse practitioner: pediatrics">Nurse·Practitioner:·Pediatrics</option>
<option value="nurse practitioner: neonatal">Nurse·Practitioner:·Neonatal</option>
<option value="nurse practitioner: acute care">Nurse·Practitioner:·Acute·Care</option>
<option value="nurse practitioner: family">Nurse·Practitioner:·Family</option>
<option value="nurse practitioner: gerontology">Nurse·Practitioner:·Gerontology</option>
<option value="nurse practitioner: women's health">Nurse·Practitioner:·Women's·Health</option>
</select>
</div>
</body>
</html>
3 个解决方案
解决方案1
0 2013-01-15 18:17:26
In order to make your code work in IE8, you need to change: 为了使您的代码在IE8中工作，您需要进行以下更改：
var target = (evt.target) ? evt.target : evt.srcElement;
with: 有：
var target = (evt.currentTarget) ? evt.currentTarget : event.srcElement;
The reason is that Internet Explorer's versions prior to 9.0 do not handle events in a standard way. 原因是Internet Explorer 9.0之前的版本无法以标准方式处理事件。
Whenever an event is triggered, a global variable named event is made available everywhere. 每当触发event就会在任何地方提供名为event的全局变量。 It is known as the event object. 它被称为事件对象。
You can check this URL for more details: 您可以检查此URL以获得更多详细信息：
http://msdn.microsoft.com/en-us/library/ie/ms535863%28v=vs.85%29.aspx http://msdn.microsoft.com/zh-cn/library/ie/ms535863%28v=vs.85%29.aspx
解决方案2
0 2013-01-15 18:20:40
function toggleField(target) {
var block = document.getElementById("specialty");
if (target.options[target.selectedIndex].value == "Nursing") {
block.style.display = "block";
} else {
block.style.display = "none";
}
}
and in HTML (instead of onchange event of select is used instead of option 's onclick ): 并且在HTML中（使用select的onchange事件代替option的onclick ）：
<select size="1" name="profession" onchange="toggleField(this)">
where this points to an element which was changed. this指向更改的元素。 Just to not write all those 只是不写所有那些
evt = (evt) ? evt : event;
var target = (evt.target) ? evt.target : evt.srcElement;
onclick on options - I do not think it should be available at all. onclick选项-我认为它根本不可用。
UPD: Here is an answer where you can find a list of browsers that does not support onclick event for <option> UPD： 这是一个答案，您可以在其中找到不支持<option> onclick事件的浏览器列表
解决方案3
0 2013-01-15 18:23:23
on your first select change 第一次选择更改
var e = document.getElementById("your First Select");
var valueOption= e.options[e.selectedIndex].value;
var block = document.getElementById("specialty");
if (valueOption == "Nursing")
block.style.display = "block";
} else {
block.style.display = "none";
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.