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

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/


First off, you aren't waiting for the DOM to be ready with your code. You should be wrapping your jQuery code in:

$(document).ready(function() {

    $('#myselect').append('<option value="test1">test1</option>');
    $('#myselect').append('<option value="test2">test2</option>');

});

I'm not sure about IE6 compatibility, but you could try the .appendTo function instead, such as:

$('<option value="Test3">Test 3</option>').appendTo("#myselect");

example:

http://jsfiddle.net/W6L9d/

Tags:

Jquery

Internet Explorer 6

Select

Option

Append

Recent Posts