[SOLVED] How To Insert OPTIONs into SELECT with jQuery -- Cross-Platform, Even IE6

How To Insert OPTIONs into SELECT with jQuery -- Cross-Platform, Even IE6

I need a cross-platform way to insert OPTIONs into a SELECT with jQuery. I think I recall in the past that IE6 does nothing when this is called:

<select id="myselect" size="1">
  <option value=""></option>
</select>
<script type="text/javascript">
  $('#myselect').append('<option value="test1">test1</option>');
  $('#myselect').append('<option value="test2">test2</option>');
</script>

I think I recall that the above worked in all browsers as well as Firefox 2+ and IE7+, but not IE6. Is this correct? If so, what's the workaround?

Solution

JavaScript is Cross-Platform, Even IE6.

To test how it looks in IE6 open Internet Explorer Browser (exist in Windows 10, it is not Edge Browser) and use F12 keyboard button (Developer tools), and in debug menu choose last button - Emulation - there you can see how it works in IE6, IE7, IE8, IE9, IE10 etc. The full screen example to test IE6 here: http://jsfiddle.net/3Qv6P/embedded/result/

See how dynamically is changing the list of states if I choose the US or Canada

example: http://jsfiddle.net/3Qv6P/

<!DOCTYPE html>
<html><head></head><body>
<div >Country * <select id="countrysel" name="country" onchange="CountryChange(this)">
    <option value="">-</option>
    <option value="38">Canada</option>
    <option value="44">China</option>
    <option value="178">Russia</option>
    <option value="225">USA</option>
    </select></div>
    <div>State/Prov.*<select id="state" name="state" style="display: none;"><option value="">-</option></select>
    <input id="state_other" type="text" name="province" value=""></div>

<!-- JAVASCRIPT -->
<script language="javascript"><!--
//<![CDATA[
    function CountryChange(id){
        id = id.value;
        id = parseInt(id);

        st=document.getElementById("state");
        sto=document.getElementById("state_other");

        st.style.display="inline";
        sto.style.display="none";
        st.options.length=0;

        if (id == 38){ 

            var CanadaProvinces = {52:"Ontario", 53:"Quebec", 54:"British Columbia", 55:"Alberta", 56:"Manitoba", 57:"Saskatchewan", 58:"Nova Scotia", 59:"New Brunswick", 60:"Newfoundland and Labrador",61:"Prince Edward Island", 62:"Northwest Territories", 63:"Yukon", 64:"Nunavut"};
            for(var key in CanadaProvinces) 
            {
                var opt = document.createElement('option');
                opt.value = key;
                opt.innerHTML = CanadaProvinces[key];
                st.appendChild(opt);
            }
        } else if (id == 225){ 

            var UnitedStates = {1:"Alabama", 2:"Alaska", 3:"Arizona", 4:"Arkansas", 5:"California", 6:"Colorado", 7:"Connecticut", 8:"D.C.", 9:"Delaware", 10:"Florida",11:"Georgia",12:"Hawaii",13:"Idaho",14:"Illinois",15:"Indiana",16:"Iowa",51:"Kansas",17:"Kentucky",18:"Louisiana",19:"Maine",20:"Maryland",21:"Massachusetts",22:"Michigan",23:"Minnesota",24:"Mississippi",25:"Missouri",26:"Montana",27:"Nebraska",28:"Nevada",29:"New Hampshire",30:"New Jersey",31:"New Mexico",32:"New York",33:"North Carolina",34:"North Dakota",35:"Ohio",36:"Oklahoma",37:"Oregon",38:"Pennsylvania",39:"Rhode Island",40:"South Carolina",41:"South Dakota",42:"Tennessee",43:"Texas",44:"Utah",45:"Vermont",46:"Virginia",47:"Washington",48:"West Virginia",49:"Wisconsin",50:"Wyoming"};
            for(var key in UnitedStates) 
            {
                var opt = document.createElement('option');
                opt.value = key;
                opt.innerHTML = UnitedStates[key];
                st.appendChild(opt);
            }
        }else{
            st.style.display="none";
            sto.style.display="inline";
        }
    }    

//]]>
--></script>
<!-- /JAVASCRIPT -->
</body></html>

example: http://jsfiddle.net/3Qv6P/