如何使用 jQuery 将选项插入到 SELECT 中——跨平台，甚至 IE6

发布于 2024-09-11 04:07:40 字数 479 浏览 7 评论 0 原文

我需要一种跨平台的方法来使用 jQuery 将选项插入到 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。这是正确的吗？如果是这样，解决方法是什么？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

瑾兮 2024-09-18 04:07:40

首先，您不需要等待 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");

example:

http://jsfiddle.net/W6L9d/

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/

回复收藏 0 原文

柠檬色的秋千 2024-09-18 04:07:40

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/

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/

回复收藏 0 原文

~没有更多了~