1

我创建了一个脚本，可以根据选择的类别更改组合框。问题是该脚本可以在除 Internet Explorer（版本 7+）之外的所有其他浏览器中运行。我没有收到错误消息，这表明 IE 不喜欢 object.innerhtml。我能做些什么来解决这个问题？

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

2 回答 2

0

这不是.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>

然后只需更换.innerHTML.<span><select>

解决问题的另一种方法是构建选项实例数组并更新<select>元素的“选项”属性。

于 2013-07-07T14:13:44.197 回答
0

我不确定为什么你会遇到 IE7+ 的问题，我没有要测试的 Microsoft 产品，但可能是这个错误：

BUG：Internet Explorer 无法设置 Select 对象的 innerHTML 属性

但是采用@Pointy 的答案，那么您可以像这样执行选择的替换，而不是包装元素，使用. 我相信这是跨浏览器。Node.cloneNode Node.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-07T15:35:06.813 回答