javascript function not working in IE 7_问答_开发者

开发者 https://www.devze.com 2022-12-26 10:44 出处：网络

Can anyone please tell me how do I make this script run in IE 7? When I run this , nothing happ开发者_JAVA技巧ens.

相关专题：javascript

Can anyone please tell me how do I make this script run in IE 7? When I run this , nothing happ开发者_JAVA技巧ens.

    <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”). You would have to use add(option), but of course that's non-standard and breaks elsewhere. So to be safe, use select.add(option, options.length), or 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'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. Consequently IE's HTMLOptionElement interface is only a façade, that often slips.

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.

Finally, you shouldn't use selectedIndex on a <select multiple>. 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.

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.

See select.add