<select>的Javascript IE innerHTML
Posted
技术标签:
【中文标题】<select>的Javascript IE innerHTML【英文标题】：Javascript IE innerHTML of <select> 【发布时间】：2011-03-30 15:14:33 【问题描述】：我正在尝试根据前一个元素的值更改元素的 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>');
【问题讨论】：
IE 确实很痛苦。它到底对你造成了什么伤害？ 结束标签的惨败真的把你的答案搞砸了。 【参考方案1】：首先，您尝试将select 的结束标记放在select 元素中，这会使代码无效。
那么select 元素如何处理它的内容可能存在问题。解析 HTML 代码时，select 元素没有任何子元素，就像常规元素一样。相反，选项是它的 options 集合中的项目。
如果要更改 select 元素中的项目，请更改其 option 集合的内容。 IE。要添加项目，请使用 document.createElement 方法创建 option 对象并添加到集合中。示例：
var opt = document.createElement('OPTION');
opt.text = 'Choose me';
opt.value = 42;
document.getElementById('bandwidth').options.add(opt);
【讨论】：
这个信息很有帮助。当我能够实现它时，我会告诉你它是如何工作的。 嗯，据我所知这是可行的。我正在阅读的唯一问题是 IE 也不喜欢“onchange”事件。然而，这是我一直在寻找的答案，非常感谢。【参考方案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>');
【讨论】：
【参考方案3】：这是我遇到的一个方便的 hack，它可以在 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>');
【讨论】：
【参考方案4】：我最近在 IE 中遇到了这个问题。我想出了一个交钥匙解决方案，它考虑到以下几点：
你不想使用 jQuery 需要它在 IE 中工作 您希望将字符串选项附加（而不是替换现有选项）到现有选择元素中 选择必须是“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 -->
这是附加/添加值的函数：
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
现在执行函数传入选择对象和字符串值：
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
我希望这对其他人有帮助！
【讨论】：
【参考方案5】：快速搜索显示这是 IE since at least IE5 中的一个已知错误。您可以尝试使用 createElement 并制作选项并附加到选择对象，或者使用像 jQuery 这样的库并将 html 附加到节点（必须注意在 IE 中工作所需的魔法）。
【讨论】：
【参考方案6】：问题的真正原因是由于 DOM 解析/更新问题，IE 不会将子 option 元素插入到 select 元素中。甚至IE9也有这个问题（后来的版本没有检查）。
您必须将select 放入div 或span 并替换整个select。您将在下面找到一个示例，该示例显示 IE 也将发挥作用。因为这个innerHTML问题一般发生在动态生成select的时候，我做了一个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>';
?>
。
请务必在此演示中仅选择具有黄色背景的选项。
【讨论】：
【参考方案7】：使用 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>');
【讨论】：
以上是关于<select>的Javascript IE innerHTML的主要内容，如果未能解决你的问题，请参考以下文章
更改 <select> 的选项并使用 JavaScript 触发事件
如何根据 JavaScript 中的值禁用 <select> 中的 <option>？
JavaScript：是不是可以动态地将 <input> 更改为 <select> 元素并再次返回？