Javascript IE innerHTML< select> [英] Javascript IE innerHTML of <select>
问题描述
我有javascript正确抓取当前值并且一切正常在Firefox，Safari，Chrome和Opera中正确使用。 IE是一种痛苦。
示例代码：
< form action =soap.phpmethod =post>
< option>专用语音< / option>
< option>帧中继< / option>
< option> ATM< / option>
< option>专用互联网< / option>
< option> IP解决方案专用端口< / option>
< option> IP解决方案增强型端口< / option>
< option>私人专线 - 国内< / option>
< option>国际专线< / option>
< option> Qwest Metro专线（QMPL）< / option>
< option> Qwest城域以太网专线（QMEPL）< / option>
< / select>< br />
< select name =termid =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：
函数bandwidthfunction（）{
var product = document.getElementById（'circuitproduct'）。value;
if（product =='Dedicated Voice'）{
document.getElementById（'bandwidth'）。innerHTML =（'< option value =DS-1> DS-1< / option> ;<选项值=DS-3> DS-3< / option><选项值=OC-3> OC-3< / option><选项值=OC-12> ; OC-12< /选项>'）;
的document.getElementById（ 'sublooptype'）的innerHTML =（'<选项值= 特殊访问 >特殊访问< /选项><选项> CO MTPT - 特殊访问< /选项><选项> ; CPA Special Access< / option>'）;
}
else if（product =='Frame Relay'）{
document.getElementById（'bandwidth'）。innerHTML =（'< option value =DS-1> DS-1·/选项><选项值= DS-3 > DS-3'; /选项><选项值= OC-3 > OC-3'; /选项><选项值= OC-12 > OC-12< /选项>'）;
的document.getElementById（ 'sublooptype'）的innerHTML =（'<选项值= 特殊访问 >特殊访问< /选项><选项> CO MTPT - 特殊访问< /选项><选项> ; CPA Special Access< / option>'）;
对于选择，您试图在选择元素中添加结束标记，这会导致代码无效。 / p>
然后， select 元素如何处理它的内容可能存在问题。当解析HTML代码时，选择元素没有任何子元素，就像常规元素一样。相反，这些选项是它的选项集合中的项目。
如果要更改选择元素，将它的内容更改为选项集合。即要添加项目，请使用 document.createElement 方法创建选项对象并添加到集合中。示例：
var opt = document.createElement（'OPTION'）;
opt.text ='选择我';
opt.value = 42;
document.getElementById（'bandwidth'）。options.add（opt）;
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>');
}
Well, first of all you have a closing tag for the select that you try to put inside the select 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, the select element doesn't have any child elements, like a regular element does. Instead the options are items in it's options collection.
If you want to change the items in the select element, change the content of it's option collection. I.e. to add items, create option objects using the document.createElement method and add to the collection. Example:
var opt = document.createElement('OPTION');
opt.text = 'Choose me';
opt.value = 42;
document.getElementById('bandwidth').options.add(opt);
这篇关于Javascript IE innerHTML< select>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
