[英]Javascript (object.innerhtml) is not compatible with IE
I have created a script that changes the combo boxes based on the category chosen. 我创建了一个脚本,该脚本可以根据所选类别更改组合框。 The problem is that the script works in all other browsers aside from Internet Explorer (version 7+). 问题是该脚本可用于Internet Explorer(版本7+)以外的所有其他浏览器。 I am not getting an error message, which indicates that IE doesn't like the object.innerhtml. 我没有收到错误消息,表明IE不喜欢object.innerhtml。 What can I do to solve this? 我该怎么解决?
Working Example: http://adcabinetsales.com/style-chooser.html 工作示例: http : //adcabinetsales.com/style-chooser.html
function ChangeCabinetCollection() {
if (document.getElementById("cabinet_collection").value == "broughton") {
// COPY VALUES
var first = document.getElementById('broughton_styles');
var options = first.innerHTML;
var second = document.getElementById('cabinet_selector');
// REPLACE VALUES
second.innerHTML = options;
// CHANGE CABINET IMAGE TO BE IN THE COLLECTION OF CHOICE
changeDoor("cabinet_selector");
} else if (document.getElementById("cabinet_collection").value == "specialty") {
// COPY VALUES
var first = document.getElementById('cabinet_style');
var options = first.innerHTML;
var second = document.getElementById('cabinet_selector');
// REPLACE VALUES
second.innerHTML = options;
// CHANGE CABINET IMAGE TO BE IN THE COLLECTION OF CHOICE
changeDoor("cabinet_selector");
}
}
function ChangeGraniteCollection() {
if (document.getElementById("granite_collection").value == "new_arrivals") {
// COPY VALUES
var first = document.getElementById('granite_new');
var options = first.innerHTML;
var second = document.getElementById('granite_selector');
// REPLACE VALUES
second.innerHTML = options;
// CHANGE CABINET IMAGE TO BE IN THE COLLECTION OF CHOICE
changeGranite("granite_selector");
} else if (document.getElementById("granite_collection").value == "Specialty Styles") {
// COPY VALUES
var first = document.getElementById('specialty_granite_styles');
var options = first.innerHTML;
var second = document.getElementById('granite_selector');
// REPLACE VALUES
second.innerHTML = options;
// CHANGE CABINET IMAGE TO BE IN THE COLLECTION OF CHOICE
changeGranite("granite_selector");
}
}
It's not .innerHTML
in general; 通常不是.innerHTML
;它不是.innerHTML
。 it's using it with <select>
elements that's causing you problems. 它与<select>
元素一起使用会导致问题。 There are a couple ways to solve the problem. 有两种方法可以解决此问题。 A simple one is to replace the entire <select>
element along with the option list. 一种简单的方法是替换整个<select>
元素以及选项列表。 That is, if your HTML looks like this: 也就是说,如果您的HTML如下所示:
<select name=whatever id=whatever>
<option value=1>Hello
<option value=2>World
</select>
Then you could alter that to be: 然后,您可以将其更改为:
<span class=select-wrapper>
<select name=whatever id=whatever>
<option value=1>Hello
<option value=2>World
</select>
</span>
Then just replace the .innerHTML
of the <span>
wrapper around the <select>
. 然后只需将<span>
包装器的.innerHTML
替换为<select>
。
The other way to solve the problem is to build an array of Option instances and update the "options" property of the <select>
element. 解决该问题的另一种方法是建立一个Option实例数组,并更新<select>
元素的“ options”属性。
I'm not sure of why you would have problems with IE7+, I don't have nay Microsoft products to test with but maybe this bug: 我不确定为什么您会遇到IE7 +的问题,我没有要测试的Microsoft产品,但是可能存在以下错误:
BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object BUG:Internet Explorer无法设置选择对象的innerHTML属性
But taking @Pointy answer, then you could perform a replace of the select like this, rather than wrap the element, uses Node.cloneNode
Node.replaceChild
. 但是,使用@Pointy答案,则可以使用Node.cloneNode
Node.replaceChild
像这样执行select的替换,而不是包装元素。 I believe this is cross-browser. 我相信这是跨浏览器。
HTML 的HTML
<select name="granite_collection" id="granite_collection">
<option selected="selected">Choose a Collection</option>
<option value="new_arrivals">Granite: New Arrivals</option>
<option value="Specialty Styles">Granite: Specialty Styles</option>
</select>
<select name="granite_selector" id="granite_selector"></select>
<select name="cabinet_style" id="cabinet_style" style="visibility:hidden;">
<option value="images/doorstyles/Brandy wine.jpg">Brandy Wine</option>
<option value="images/doorstyles/Canvas.jpg">Canvas</option>
<option value="images/doorstyles/Country Linen.jpg">Country Linen</option>
<option value="images/doorstyles/Expresso.jpg">Expresso</option>
<option value="images/doorstyles/Mocha glazed.jpg">Mocha Glazed</option>
<option value="images/doorstyles/Shaker.jpg">Shaker</option>
<option value="images/doorstyles/Tahoe.jpg">Tahoe</option>
<option value="images/doorstyles/Charleston Antique White.jpg">Charleston Antique White</option>
<option value="images/doorstyles/Charleston Cherry.jpg">Charleston Cherry</option>
<option value="images/doorstyles/Charleston Saddle.jpg">Charleston Saddle</option>
<option value="images/doorstyles/Java Shaker.jpg">Java Shaker</option>
<option value="images/doorstyles/Savannah Toffee.jpg">Savannah Toffee</option>
<option value="images/doorstyles/White Shaker.jpg">White Shaker</option>
<option value="images/doorstyles/York Chocolate.jpg">York Chocolate</option>
<option value="images/doorstyles/York Antique White.jpg">York Antique White</option>
<option value="images/doorstyles/Dillon1.jpg">Dillon1</option>
<option value="images/doorstyles/Dillon2.jpg">Dillon2</option>
</select>
Javascript Java脚本
var graniteCollection = document.getElementById("granite_collection"),
graniteSelector = document.getElementById("granite_selector"),
cabinetStyle = document.getElementById("cabinet_style");
graniteCollection.onchange = function () {
var clone = cabinetStyle.cloneNode(true);
clone.id = graniteSelector.id;
clone.name = graniteSelector.name;
clone.style.visibility = "";
graniteSelector.parentNode.replaceChild(clone, graniteSelector);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.