Javascript IE innerHTML of <select>

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><opt开发者_StackOverflowion>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);

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.

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

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.

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

or as a function for readability:

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

I recently came across this problem with IE. I came up with a turnkey solution that works with the following things in mind:

• You don't want to use jQuery
• Need it to work in IE < 9
• You want to append ( not replace the existing options ) string options into an existing select element
• The select must be a type of "select-one"
• Must wrap selects in their own parent element

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:

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

Here is the function to APPEND/ADD values:

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

Now to execute the function pass in the select object and string values:

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

This will generate a select with the options passed, even in 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 -->

If you needed the script to REPLACE the values use the following:

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

I hope this helps someone else!

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

The real cause of the problem is that due to a DOM parsing/updating problem, IE will not insert child option elements into a select element. Even IE9 still has this problem (later versions not checked).

You have to put the select in a div or span and replace the whole select. 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:

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

.

And the php file, which should be named 'getoptions.php' and should be put in the same folder:

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

.

Be sure to select only the options with a yellow background, in this demo.

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