Javascript IE
我正在尝试根据前一个元素的值更改元素的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>');
}
I'm trying to change the innerHTML of a element based on the value of the previous element.
I have the javascript correctly grabbing the current value and everything works correctly in Firefox, Safari, Chrome and Opera. IE is a pain.
sample code:
<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>
sample 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>');
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(7)
首先,您尝试将
select
的结束标记放入select
元素中,这会使代码无效。那么
select
元素处理其内容的方式可能存在问题。解析 HTML 代码时,select
元素没有任何子元素,就像常规元素一样。相反,选项是其options
集合中的项目。如果要更改
select
元素中的项目,请更改其option
集合的内容。即,要添加项目,请使用document.createElement
方法创建option
对象并添加到集合中。例子:Well, first of all you have a closing tag for the
select
that you try to put inside theselect
element, which makes the code invalid.Then there might be a problem with how the
select
element treats it's content. When the HTML code is parsed, theselect
element doesn't have any child elements, like a regular element does. Instead the options are items in it'soptions
collection.If you want to change the items in the
select
element, change the content of it'soption
collection. I.e. to add items, createoption
objects using thedocument.createElement
method and add to the collection. Example:您必须删除“select”元素并设置innerHTML 属性的末尾。这不是innerHTML 的一部分。它是元素“bandwith”本身的结束标签。
You have to remove the "select"-Element and the end of setting the innerHTML-Property. This is not a part of innerHTML. Its the end-tag of the element 'bandwith' itself.
这是我遇到的一个方便的技巧,它可以在 FF 和 IE 中工作,作为无法更改所选元素上的 innerHTML 的解决方法。
或者作为可读性的函数:
Here's a handy hack I came across that works in both FF and IE as a workaround to the inability to change innerHTML on select elements.
or as a function for readability:
我最近在使用IE时遇到了这个问题。我想出了一个交钥匙解决方案,它考虑到以下问题:
我们有许多请求相同信息的登陆页面(年龄、产品、国家/地区、州等...),但具有不同的选择选项。我使用的实现附加了新的选择选项。这样做是为了允许每个提货页有一个自定义默认选项。一个页面可能具有第一个选项作为“选择项目”,另一个页面可能具有“选择一个”等等。
选择格式:
这是附加/添加值的函数:
现在执行函数,传递选择对象和字符串值:
这将生成一个带有传递选项的选择,即使在 IE 中也是如此!
如果您需要脚本来替换值,请使用以下内容:
我希望这对其他人有帮助!
I recently came across this problem with IE. I came up with a turnkey solution that works with the following things in mind:
We have many landing pages requesting the same information (age, products, country, state etc... ) but with different select options. The implementation I use appends new select options. This was done to allow a custom default option per lading page. One page may have the first option as "select item" another may have "choose one" and so forth.
Select format:
Here is the function to APPEND/ADD values:
Now to execute the function pass in the select object and string values:
This will generate a select with the options passed, even in IE!
If you needed the script to REPLACE the values use the following:
I hope this helps someone else!
快速搜索表明,这是 IE 至少自 IE5 以来的一个已知错误。您可以尝试使用 createElement 和 make options 并附加到选择对象,或者使用像 jQuery 这样的库并将 html 附加到节点(这必须处理在 IE 中工作所需的魔力)。
A quick search shows this has been a known bug in IE since at least IE5. You could try to use createElement and make options and append to the select object, or use a library like jQuery and append the html to the node (which must take care of the magic necessary to work in IE).
问题的真正原因是由于 DOM 解析/更新问题,IE 不会将子
option
元素插入到select
元素中。即使IE9仍然存在此问题(后续版本未检查)。您必须将
select
放入div
或span
中,并替换整个select
。下面你会发现一个例子,说明 IE 也能发挥作用。因为这个innerHTML问题一般出现在动态生成select的时候,所以我做了一个AJAX & PHP 示例。html 文件:
.
php 文件应命名为“getoptions.php”,并应放在同一文件夹中:
。
在此演示中,请务必仅选择具有黄色背景的选项。
The real cause of the problem is that due to a DOM parsing/updating problem, IE will not insert child
option
elements into aselect
element. Even IE9 still has this problem (later versions not checked).You have to put the
select
in adiv
orspan
and replace the wholeselect
. Below you will find an example that shows that then IE will play ball as well. Because this innerHTML problem generally occurs when dynamically generating selects, I made an AJAX & PHP example.The html file:
.
And the php file, which should be named 'getoptions.php' and should be put in the same folder:
.
Be sure to select only the options with a yellow background, in this demo.
使用 Jquery
$('#bandwidth').html('<选项值=“DS-1”>DS-1<选项值=“DS-3”>DS-3< ;/选项><选项值=“OC-3”>OC-3<选项值=“OC-12”>OC-12');
use 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>');