Javascript IE innerHTML的<；选择>；

我正试图根据前一个元素的值更改元素的innerHTML

我让javascript正确地获取当前值，并且在Firefox、Safari、Chrome和Opera中一切都正常工作。这是一种痛苦

示例代码：

<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>

专用语音
帧中继
自动取款机
专用互联网
IP解决方案专用端口
IP解决方案增强端口
专用线路-国内
国际专线
Qwest地铁专用线（QMPL）
Qwest城域以太网专线（QMEPL）


一年
两年
三年

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

函数带宽函数（）{
var product=document.getElementById（'circuitproduct'）。值；
如果（产品==‘专用语音’）{
document.getElementById（'bandwidth'）.innerHTML=（'DS-1DS-3OC-3OC-12'）；
document.getElementById（'sublooptype'）。innerHTML=（'Special AccessCO MtPt-Special AccessCPA Special Access'）；
}
else if（产品=‘帧中继’）{
document.getElementById（'bandwidth'）.innerHTML=（'DS-1DS-3OC-3OC-12'）；
document.getElementById（'sublooptype'）。innerHTML=（'Special AccessCO MtPt-Special AccessCPA Special Access'）；
}

必须删除“select”-元素和innerHTML属性设置的结尾。这不是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>');

document.getElementById（'bandwidth'）.innerHTML=（'DS-1DS-3OC-3OC-12'）；

快速搜索表明这是IE中的一个已知错误。您可以尝试使用createElement和制作选项并附加到select对象，或者使用类似jQuery的库并将html附加到节点（这必须考虑在IE中工作所需的魔力）.

首先，您有一个

select

的结束标记，您试图将它放在

select

元素中，这使得代码无效

然后，

select

元素如何处理其内容可能会出现问题。解析HTML代码时，

select

元素没有任何子元素，就像普通元素一样。相反，选项是它的

options

集合中的项

如果要更改

选择

元素中的项目，请更改其

选项

集合的内容。即，要添加项目，请使用

文档.createElement

方法创建

选项

对象并添加到集合中。示例：

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

---

下面是我遇到的一个简便的破解方法，它可以在FF和IE中工作，作为无法在选择元素上更改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>' );

document.getElementById（'bandwidth'）.outerHTML=document.getElementById（'bandwidth'）.outerHTML.replace（document.getElementById（'bandwidth'）.innerHTML++'，DS-1DS-3OC-3OC-12'+'）；

或作为可读性函数：

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

函数swapinnertml（objID，newHTML）{
var el=document.getElementById（objID）；
el.outerHTML=el.outerHTML.replace（el.innerHTML+''，newHTML+''；
}

问题的真正原因是由于DOM解析/更新问题，IE不会将子

选项

元素插入

选择

元素。即使IE9仍然存在此问题（未选中更高版本）

您必须将

select

放在

div

或

span

中，并替换整个

select

。下面的示例显示IE也会玩球。因为动态生成select时通常会出现这种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>

使用AJAX和PHP进行链（ed）选择
挑选{
最小宽度：170px；
}
option.toSelect{
背景：黄色；
}
选择一个城市：
波士顿
芝加哥
纽约
函数getOptions（qValue，containerId）{
var ajaxRequest=new-XMLHttpRequest（）；
如果（（qValue==“”）| |（containerId==“”）{
警报（“无效选择”）；
返回；
}
ajaxRequest.onreadystatechange=函数（）{
if（（ajaxRequest.readyState==4）和&（ajaxRequest.status==200））{
document.getElementById（containerId）.innerHTML=ajaxRequest.responseText；
}
}
打开（“GET”，“getoptions.php？q=“+qValue，true”）；
ajaxRequest.send（）；
}

以及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>';
}
?>

请确保在此演示中仅选择黄色背景的选项。

使用Jquery

---

$（“#带宽”）.html（'DS-1DS-3OC-3OC-12'）；

最近，我在IE中遇到了这个问题。我想出了一个全套解决方案，它考虑了以下几点：

• 您不想使用jQuery
• 需要它在IE<9中工作吗
• 您希望将字符串选项附加（而不是替换现有选项）到现有的select元素中
• 选择必须是“选择一个”类型
• 必须在其自己的父元素中换行选择

我们有许多登录页要求相同的信息（年龄、产品、国家、州等），但选择选项不同。我使用的实现附加了新的选择选项。这样做是为了允许每个提货页都有一个自定义默认选项。一个页面可能有第一个选项作为“选择项目”，另一个页面可能有“选择一个”等等

选择格式：

<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 -->

现在要在选择对象和字符串值中执行函数pass：

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

我希望这对某人有帮助

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

<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 -->

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