简体   繁体   English

javascript函数在IE 7中不起作用

[英]javascript function not working in IE 7

Can anyone please tell me how do I make this script run in IE 7? 任何人都可以告诉我如何在IE 7中运行此脚本? When I run this , nothing happens. 当我运行它时,没有任何反应。

    <html>
    <head>
    <script language="JavaScript">
    function moveSelectedOption() {
        // Fetch references to the <select> elements.
        var origin = document.getElementById('origin_select');
        var target = document.getElementById('target_select');


        // Fetch the selected option and clone it.
        var option = origin.options[origin.selectedIndex];

       var copy = option.cloneNode(true);

        // Add the clone to the target element.
        target.add(copy, null);
    }
    </script>
</head>
<body>
    <select id="origin_select" multiple>
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <select id="target_select" multiple>

        <option value="C1">C1</option>
    </select>
    <button onclick="moveSelectedOption()">Add</button>
 <!--   <input type="button" onClick="moveSelectedOption()" value="AddMeToo" />  this does not work either-->
    </body>
    </html>

Firstly, you can't use add(option, null) in IE-up-to-7 due to a bug (you get “Type mismatch”). 首先,由于一个错误(你得到“类型不匹配”),你不能在IE-up-to-7中使用add(option, null) )。 You would have to use add(option) , but of course that's non-standard and breaks elsewhere. 你必须使用add(option) ,但当然这是非标准的并在其他地方打破。 So to be safe, use select.add(option, options.length) , or select.options[options.length]= option . 所以为了安全起见,请使用select.add(option, options.length)select.options[options.length]= option

Next, you can't add an option to a select when that option has already been in a select in IE-up-to-7 (even after cloning!) due to another bug (you get “Invalid argument”). 接下来,当该选项已经在IE-up-to-7中选择时(即使在克隆之后!)由于另一个错误(你得到“无效参数”),你不能向select添加一个选项。 IE's handling of <option> elements is off in a lot of ways, the source of which is that IE's select boxes are native Windows widgets, not objects implemented by the browser. IE对<option>元素的处理在许多方面都是关闭的,其来源是IE的选择框是本机Windows小部件,而不是浏览器实现的对象。 Consequently IE's HTMLOptionElement interface is only a façade, that often slips. 因此,IE的HTMLOptionElement接口只是一个外观,通常会滑落。

The safe way to handle option elements is to create them anew each time, either using document.createElement and writing the value and text properties, or using the old-school new Option() constructor as in rahul's answer. 处理选项元素的安全方法是每次重新创建它们,使用document.createElement并编写valuetext属性,或者使用old-school new Option()构造函数,如rahul的答案。

Finally, you shouldn't use selectedIndex on a <select multiple> . 最后,您不应在<select multiple>上使用selectedIndex Since there isn't necessarily one-and-only-one selection it doesn't make sense in any browser. 由于不一定只进行一次选择,因此在任何浏览器中都没有意义。 (For example, clicking the Add button with no selection gives an error.) Instead, loop over all options and copy each option that is .selected . (例如,单击“ Add按钮时没有选择会产生错误。)而是循环遍历所有选项并复制每个选项.selected

Try 尝试

var origin = document.getElementById('origin_select');
var target = document.getElementById('target_select');

// Fetch the selected option and clone it.
var option = origin.options[origin.selectedIndex];
target.options[target.options.length] = new Option(option.text, option.value);

If you want to remove the option from the origin select element then you can use this 如果要从原点选择元素中删除该选项,则可以使用此选项

origin.remove(option);

Demo without move 演示没有移动

Demo with move 用移动演示

Edit 编辑

This line was causing the error. 这条线导致错误。

target.add(copy, null);

add() does not work with the standard second argument in Explorer, even with value null, so in order to be compatible one may try the two-argument version and upon failure, use the single argument version. add()不能与Explorer中的标准第二个参数一起使用,即使值为null,因此为了兼容,可以尝试使用双参数版本,并且在失败时使用单个参数版本。

See select.add 请参阅select.add

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM