CODEWITHSUNDEEP
javascripthtml
JPro
JPro

Reputation: 6546

javascript function not working in IE 7

Can anyone please tell me how do I make this script run in 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>

Upvotes: 3

Views: 2169

Answers (2)

rahul
rahul

Reputation: 187040

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

Upvotes: 0

bobince
bobince

Reputation: 536379

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.

Upvotes: 2

Related Questions