代码之家 › 专栏 › 技术社区 › Xavias

javascript ie innerhtml of<select>

innerhtml forms internet-explorer html javascript

Xavias · 技术社区 · 14 年前

我正在尝试根据前一个元素的值更改元素的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>');
}

7 回复 | 直到 9 年前

Guffa 14 年前

首先,你有一个结束标签 select 你试图把它放进 选择 元素,使代码无效。

那么,如何 选择 元素处理它的内容。当分析HTML代码时, 选择 元素没有任何子元素,就像常规元素一样。相反,选项是它的 options 收集。

如果要更改 选择 元素,更改其内容 option 收集。即,要添加项目,请创建 选项 对象使用 document.createElement 方法并添加到集合中。例子:

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

cpt.oneeye 14 年前

您必须删除“select”元素和innerhtml属性的设置结束。这不是InnerHTML的一部分。它是元素“bandwwith”本身的结束标记。

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

Tyler W. Cox 12 年前

这是我遇到的一个方便的黑客,它在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>' );

或作为可读性函数:

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

Eko3alpha 9 年前

我最近在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 -->

下面是附加/添加值的函数:

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对象和字符串值中执行函数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>'
);

这将生成一个通过选项的选择,即使在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 -->

如果需要脚本替换值,请使用以下命令:

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

我希望这能帮助别人!

pkaeding 14 年前

快速搜索显示这是IE中已知的错误 since at least IE5 . 您可以尝试使用createElement和make选项并附加到select对象,或者使用jquery之类的库并将HTML附加到节点(这必须注意在ie中工作所需的魔力)。

Frank Conijn - Support Ukraine 10 年前

问题的真正原因是由于DOM解析/更新问题,IE将不插入子级 option 元素变成 select 元素。甚至IE9也存在这个问题(未检查更高版本)。

你必须把 选择 在一个 div 或 span 替换整个 选择 . 下面你会找到一个例子,说明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>';
}
?>

在本演示中,请确保只选择背景为黄色的选项。

John Adel 10 年前

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