如何使用 jQuery 在 SELECT 中插入选项——跨平台，甚至 IE6
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3311428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Insert OPTIONs into SELECT with jQuery -- Cross-Platform, Even IE6
提问by Volomike
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:
我需要一种跨平台的方式来使用 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>
I think I recall that the above worked in all browsers as well as Firefox 2+ and IE7+, but not IE6. Correct? If so, what's the workaround?
我想我记得上面的内容适用于所有浏览器以及 Firefox 2+ 和 IE7+，但不适用于 IE6。正确的？如果是这样，解决方法是什么？
采纳答案by Intacto
JavaScript is Cross-Platform, Even IE6.
JavaScript 是跨平台的，甚至 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/
要测试它在 IE6 中的外观，请打开 Internet Explorer 浏览器（存在于 Windows 10 中，它不是 Edge 浏览器）并使用 F12 键盘按钮（开发人员工具），然后在调试菜单中选择最后一个按钮 - 仿真 - 在那里你可以看到它是如何工作的在 IE6, IE7, IE8, IE9, IE10 等 中测试 IE6 的全屏示例：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/
示例：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/
回答by KP.
First off, you aren't waiting for the DOM to be ready with your code. You should be wrapping your jQuery code in:
首先，您不是在等待 DOM 准备好您的代码。您应该将 jQuery 代码包装在：
$(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:
我不确定 IE6 的兼容性，但您可以尝试使用 .appendTo 函数，例如：
$('<option value="Test3">Test 3</option>').appendTo("#myselect");
example:
例子：
