How To Insert OPTIONs into SELECT with jQuery -- Cross-Platform, Even IE6_问答_开发者

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

开发者 https://www.devze.com 2023-01-08 23:38 出处：网络

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?

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/

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/