IE9 not correctly running .each() jQuery function

Question

I have two muti-selects where I can tranfer items back-and-forth, which is working perfect in all browsers. My problem is in IE9 the .each() does not seem to be running. Basically what I'm doing is running an .each() that will select all items in the desired multi-select before I submit. In IE9 when I click submit none of the items in select2 never get selected.

JSFIDDLE

JQUERY

/* multi-select handler */
$('#add').click(function()
{  
    return !$('#select1 option:selected').remove().appendTo('#select2').removeAttr("selected"); 
});  
$('#remove').click(function()
{  
    return !$('#select2 option:selected').remove().appendTo('#select1').removeAttr("selected");  
});

/* submit button handler */
$('#submit').click(function)
{
    /* select all items in select2 */
    $('#select2 option').each(function()
    { 
        $(this).attr("selected","selected");
    });

    /* check to see if any items were selected */
    if( $('#select2 option').length === 0 )
    {
        alert('no items selected');
    }
    else
    {
        alert('success'); 
    }
});

HTML

<div class="multi-select-container">       
    <div class="multi-select-left">
        <select multiple id="select1">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
        </select>             
    </div>  
    <div class="multi-select-center">
        <button id="add" class="btn btn-mini btn-add" style="display:block;margin:5px;">Add</button>
        <button id="remove" class="btn btn-mini btn-delete" style="display:block;margin:5px;">Remove</button>
    </div>
    <div class="multi-select-right"> 
        <select multiple id="select2"></select>               
    </div> 
</div>

possible duplicate of [jQuery Cannot set "selected"="selected" via attr() on — Jacob Krall, Jul 26 '13 at 20:43
Just tested in IE9 (http://jsfiddle.net/9VDGN/2/): your `.each` loop is running fine. Your problem is that `$(this).attr("selected", "selected")` isn't working. — apsillers, Jul 26 '13 at 20:47
Hm, interesting. I've obviously been looking at the wrong line of code. Thank you for pointing that out. I'm looking into what Jacob is saying about this being a duplicate. Thanks :) — Mike, Jul 26 '13 at 20:51

score 3 · Accepted Answer · answered Jul 26 '13 at 20:52

3

Try replacing this :

$(this).attr("selected", "selected");

By this :

$(this).prop("selected", true);

answered Jul 26 '13 at 20:52

Vincent jaouen

157
4

@Mike: You don't need jQuery here. Just do `this.selected = true;` – Jul 26 '13 at 21:27

score -1 · Answer 2 · answered Jul 26 '13 at 20:47

-1

I think the problem is this wontfix in jquery. I think you have to avoid the attr function.

answered Jul 26 '13 at 20:47

Daniel Schmidt

11,605
5
38
70

That's about setting events using `attr`. In this code the only attribute set is `selected`, which is not an event. How are they related? – GolezTrol Jul 26 '13 at 20:49

IE9 not correctly running .each() jQuery function

2 Answers2