如何使用 jQuery 将 OPTION 插入到 SELECT 中——跨平台，甚至 IE6答案

【问题标题】：How To Insert OPTIONs into SELECT with jQuery -- Cross-Platform, Even IE6如何使用 jQuery 将 OPTION 插入到 SELECT 中——跨平台，甚至 IE6
【发布时间】：2011-03-19 16:38:11
【问题描述】：

我需要一种跨平台的方式来使用 jQuery 将 OPTION 插入到 SELECT 中。我想我记得过去 IE6 在调用它时什么都不做：

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

我想我记得以上内容适用于所有浏览器以及 Firefox 2+ 和 IE7+，但不适用于 IE6。正确的？如果是这样，解决方法是什么？

【问题讨论】：

标签： jquery select internet-explorer-6 append option

【解决方案1】：

首先，您无需等待 DOM 准备好您的代码。您应该将 jQuery 代码包装在：

$(document).ready(function() {

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

});

我不确定 IE6 的兼容性，但您可以尝试 .appendTo 函数，例如：

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

示例：

http://jsfiddle.net/W6L9d/

【讨论】：

再一次，没有人在 IE6 中进行测试。我记得去年 IE6 有这个错误。不幸的是，我没有 IE6 工作站来测试了。
好的。好吧，我认为如果您总体上担心 IE6 兼容性，您应该找到一种亲自测试的方法。有多种方法可以并排安装 IE6 和 7（例如tredosoft.com/Multiple_IE）。
我有 Ubuntu Linux 作为我的开发工作站。我有一个用于 Windows 2008 Server 试用版的测试 VM，用于测试除 IE6 之外的所有内容。 Tredosoft 的解决方案无法解决这个问题。

【解决方案2】：

JavaScript 是跨平台的，甚至是 IE6。

要测试它在 IE6 中的外观，请打开 Internet Explorer 浏览器（存在于 Windows 10 中，它不是 Edge 浏览器）并使用 F12 键盘按钮（开发人员工具），然后在调试菜单中选择最后一个按钮 - 仿真 - 那里你可以看到它在 IE6、IE7、IE8、IE9、IE10 等中是如何工作的。 此处测试 IE6 的全屏示例：http://jsfiddle.net/3Qv6P/embedded/result/

如果我选择美国或加拿大，查看州列表的动态变化

示例：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>

示例：http://jsfiddle.net/3Qv6P/

【讨论】：