Javascript IE innerHTML <select>

Question

我正在嘗試根據前一個元素的值更改元素的innerHTML。

我有正確抓取當前值的JavaScript，一切正常在Firefox，Safari，Chrome和Opera中正常工作。 IE是一種痛苦。

示例代碼：

<form action="soap.php" method="post">
    <select name="circuitproduct" id="circuitproduct" onchange="bandwidthfunction();">
        <option>Dedicated Voice</option>
        <option>Frame Relay</option>
        <option>ATM</option>
        <option>Dedicated Internet</option>
        <option>IP Solutions Private Port</option>
        <option>IP Solutions Enhanced Port</option>
        <option>Private Line – Domestic</option>
        <option>Int’l Private Line</option>
        <option>Qwest Metro Private Line (QMPL)</option>
        <option>Qwest Metro Ethernet Private Line (QMEPL)</option>
    </select><br />
    <select name="term" id="term">
        <option value="1-Year">1-Year</option>
        <option value="2-Year">2-Year</option>
        <option value="3-Year">3-Year</option>
    </select>
    <select id="bandwidth">
    </select>
    <select id="sublooptype">
    </select>
</form>

示例javascript：

function bandwidthfunction() {
var product = document.getElementById('circuitproduct').value;
    if (product == 'Dedicated Voice') {
        document.getElementById('bandwidth').innerHTML = ('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');
        document.getElementById('sublooptype').innerHTML = ('<option value="Special Access">Special Access</option><option>CO MtPt - Special Access</option><option>CPA Special Access</option>');
    }
    else if (product == 'Frame Relay') {
        document.getElementById('bandwidth').innerHTML = ('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');
        document.getElementById('sublooptype').innerHTML = ('<option value="Special Access">Special Access</option><option>CO MtPt - Special Access</option><option>CPA Special Access</option>');
}

Answer 1

好吧，首先，你有一個關於你試圖放入select元素的select的結束標記，這會使代碼無效。

那么select元素如何處理它的內容可能會有問題。 解析HTML代碼時， select元素沒有任何子元素，就像常規元素一樣。 相反，選項是其options集合中的項目。

如果要更改select元素中的項目，請更改其option集合的內容。 即添加項目，使用document.createElement方法創建option對象並添加到集合中。 例：

var opt = document.createElement('OPTION');
opt.text = 'Choose me';
opt.value = 42;
document.getElementById('bandwidth').options.add(opt);

Answer 2

您必須刪除“select”-Element並設置innerHTML-Property的結束。 這不是innerHTML的一部分。 它是'bandwith'元素本身的結束標記。

document.getElementById('bandwidth').innerHTML = ('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');

Answer 3

這是我遇到的一個方便的黑客，它可以在FF和IE中工作，作為無法在select元素上更改innerHTML的解決方法。

document.getElementById('bandwidth').outerHTML = document.getElementById('bandwidth').outerHTML.replace( document.getElementById('bandwidth').innerHTML + '</select>' , '<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>' + '</select>' );

或作為可讀性的功能：

function swapInnerHTML(objID,newHTML) {
  var el=document.getElementById(objID);
  el.outerHTML=el.outerHTML.replace(el.innerHTML+'</select>',newHTML+'</select>');
}

Answer 4

我最近遇到了IE的這個問題。 我想出了一個可以滿足以下要求的交鑰匙解決方案：

• 你不想使用jQuery
• 需要它在IE <9中工作
• 您希望將（不替換現有選項）字符串選項附加到現有的select元素中
• select必須是“select-one”類型
• 必須在自己的父元素中包裝選擇

我們有許多登陸頁面請求相同的信息（年齡，產品，國家，州等...），但有不同的選擇選項。 我使用的實現附加了新的選擇選項。 這樣做是為了允許每個提貨頁面的自定義默認選項。 一個頁面可以具有第一選項作為“選擇項目”，另一個頁面可以具有“選擇一個”等等。

選擇格式：

<div>  <!-- you MUST wrap the select in a tag without any siblings -->
    <select name="age" id="form-age">
        <option value="">Choose Age</option>
    </select>
</div>  <!-- you MUST wrap the select in a tag without any siblings -->

以下是APPEND / ADD值的功能：

function addOptions(el, options){
    // checks to make sure element exists and is a select
    if(el && el.type === "select-one"){
        el.innerHTML = el.innerHTML + options;
        el.parentNode.innerHTML = el.outerHTML; // needed for IE
    }
}

現在執行select對象和字符串值中的函數傳遞：

addOptions(
    document.getElementById("form-age"), 
    '<option value="1">18-25</option><option value="2">26-35</option><option value="3">36-45</option><option value="4">46-55</option><option value="5">56-65</option><option value="6">66-75</option><option value="7">76-85</option><option value="8">86+</option>'
);

即使在IE中，這也會生成一個帶有選項的選擇！

<div>  <!-- you MUST wrap the select in a tag without any siblings -->
    <select name="age" id="form-age">
        <option value="">Choose Age</option>
        <option value="1">18-25</option><option value="2">26-35</option><option value="3">36-45</option><option value="4">46-55</option><option value="5">56-65</option><option value="6">66-75</option><option value="7">76-85</option><option value="8">86+</option>
    </select>
</div>  <!-- you MUST wrap the select in a tag without any siblings -->

如果您需要腳本來REPLACE值，請使用以下命令：

function replaceOptions(el, options){
    if(el && el.type === "select-one"){
        el.innerHTML = options;
        el.parentNode.innerHTML = el.outerHTML; // needed for IE
    }
}

我希望這有助於其他人！

Answer 5

問題的真正原因是由於DOM解析/更新問題，IE不會將子option元素插入到select元素中。 即使IE9仍然存在此問題（未檢查更高版本）。

您必須將select放在div或span並替換整個select 。 下面你會看到一個例子，表明IE也會玩球。 因為這個innerHTML問題通常在動態生成選擇時出現，所以我做了一個AJAX和PHP示例。

html文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Chain(ed) select with AJAX and PHP</title>
<style>
    select {
    min-width: 170px;
    }
    option.toSelect {
    background: yellow;
    }
</style>
</head>
<body>
    <form action="whatever.php">
        <span>
            <select id="cities" onchange="getOptions(this.value,'airlinesContainer')">
                <option value="">Select a city:</option>
                <option value="boston_airlines">Boston</option>
                <option value="chicago_airlines" class="toSelect">Chicago</option>
                <option value="newyork_airlines">New York</option>
            </select>
        </span>
        <span id="airlinesContainer">
            <select>
            </select>
        </span>
        <span id="classesContainer">
            <select>
            </select>
        </span>
    </form>
    <script>
        function getOptions(qValue,containerId) {
            var ajaxRequest = new XMLHttpRequest();
            if ((qValue == "") || (containerId == "")) {
                alert('Invalid selection.');
                return;
            }
            ajaxRequest.onreadystatechange = function() {
                if ((ajaxRequest.readyState == 4) && (ajaxRequest.status == 200)) {
                    document.getElementById(containerId).innerHTML = ajaxRequest.responseText;
                }
            }
            ajaxRequest.open("GET","getoptions.php?q="+qValue,true);
            ajaxRequest.send();
        }
    </script>
</body>
</html>

。

和php文件，應該命名為'getoptions.php'，並且應該放在同一個文件夾中：

<?php
$q = $_GET['q'];

$chicago_airlines ='
            <select id="airlines" onchange="getOptions(this.value,\'classesContainer\')">
                <option value="">Select an airline:</option>
                <option value="delta_classes">Delta</option>
                <option value="klm_classes" class="toSelect">KLM</option>
                <option value="united_classes">United Airlines</option>
            </select>';

$klm_classes ='
            <select id="classes">
                <option value="business">World Business Class</option>
                <option value="comfort">Economy Comfort</option>
                <option value="economy">Economy</option>
            </select>';

if ($q == 'chicago_airlines') {
    echo $chicago_airlines;
}
elseif ($q == 'klm_classes') {
    echo $klm_classes;
}
else {
    echo '<select>
              <option>Invalid selection</option>
          </select>';
}
?>

。

在本演示中，請務必僅選擇黃色背景的選項。

Answer 6

使用Jquery

$('#bandwidth').html('<option value="DS-1">DS-1</option><option value="DS-3">DS-3</option><option value="OC-3">OC-3</option><option value="OC-12">OC-12</option>');

Answer 7

快速搜索顯示，至少從IE5開始，這已成為IE中的一個已知錯誤。 您可以嘗試使用createElement並make選項並附加到select對象，或使用類似jQuery的庫並將html附加到節點（必須處理在IE中工作所必需的魔法）。