Javascript（object.innerhtml）與IE

不兼容我已經創建了一個腳本，可根據所選類別更改組合框。問題是該腳本在除Internet Explorer（版本7+）以外的所有其他瀏覽器中都可以使用。我沒有收到錯誤消息，這表明IE不喜歡object.innerhtml。我能做些什麼來解決這個問題？Javascript（object.innerhtml）與IE

工作實例：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"); 
    } 
}

來源

2013-07-07 user2558183

我看在IE 10的例子，它是工作 – Aguardientico

這不是一般.innerHTML;它與<select>元素一起使用會導致您的問題。有幾種方法可以解決這個問題。一個簡單的方法是將整個<select>元素與選項列表一起替換。也就是說，如果你的HTML看起來像這樣：

<select name=whatever id=whatever> 
    <option value=1>Hello 
    <option value=2>World 
</select>

然後你可以改變這種爲：

<span class=select-wrapper> 
    <select name=whatever id=whatever> 
    <option value=1>Hello 
    <option value=2>World 
    </select> 
</span>

然後，只需更換<select>圍繞<span>封裝的.innerHTML。

解決該問題的另一種方法是構建一個Option實例數組並更新<select>元素的「options」屬性。

來源

2013-07-07 14:13:44 Pointy

謝謝！我做了一個數組並簡化了我的功能。現在有一個函數用於更改圖像，另一個用於使用新選項陣列填充字段。再次，謝謝！ – user2558183

我不知道你爲什麼會與IE7 +的問題，我不反對微軟產品的測試，但也許這個錯誤有：

BUG: Internet Explorer Fails to Set the innerHTML Property of the Select Object

但考慮@Pointy答案，那麼您可以像這樣執行替換選擇，而不是包裝元素，使用Node.cloneNodeNode.replaceChild。我相信這是跨瀏覽器。

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

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); 
}

在jsfiddle

來源

2013-07-07 15:35:06 Xotic750

Javascript（object.innerhtml）與IE

回答

相關問題