jQuery problem with multi-select

Question

Hi everybody,

On my page I have to select option values loaded by a $.post funtion. I have a button to "move" data from one select to the other. The example works in a new page but not in my page not. The elements selected do not move to the other select after the click.

The question is there is another way to do it or how can i correct my page for making it work?

thanks in advance, follow example code:

<div style="float:left; border:1px solid red;">
    <div style="background-color:red; color:white;" align="center">INFORMATIVE</div>
    <div id="prop_info" style="float:left;">
        <div style="border:1px solid red;">PROPOSTI</div>
        <div style="float:left"><select multiple id="sel_info_pro" name="sel_info_pro" class="sel"><option value="b">a</option><option>b</option></select></div>
        <div style="float:left;"><a href="#" id="add_info"> >> </a><br><a href="#" id="remove_info"> << </a></div>
    </div>  
    <div id="conf_info" style="float:left;">
        <div style="border:1px solid red;">CONFIGURATI</div>
        <select multiple id="sel_info_conf" name="sel_info_conf" class="sel"></select>
    </div>
</div>

$(document).ready(function(){
    $('#add_info').click(function() {
        return !$('#sel_info_pro option:selected').remove().appendTo('#sel_info_conf');
    });
    $('#remove_info').click(function() {
        return !$('#sel_info_conf option:selected').remove().appendTo('#sel_info_pro');
    });
});

Answer 1

A bit guidance that might help. If you did the following:

alert($('#sel_info_pro option:selected').length);

Then you would get 0, regardless of how many you had selected

The selected options are actually stored against the val() on the jQuery object:

alert($('#sel_info_pro option').val().length); //gives you the count of options selected
alert($('#sel_info_pro option').val()[0]); //gives you the value of the first option selected

So, the approach above will not work. You may have to iterate through the array, comparing them to each item in the list to move them over.

This link may also help: http://marcgrabanski.com/articles/jquery-select-list-values

Answer 2

I found my working solution:

$(document).ready(function(){
$('#add_info').click(function() {
    var foop = []; 
    $('#sel_info_pro option:selected').each(function(z, selected){ 
        foop[z] = $(selected).val(); 
        return !$('#sel_info_pro option:selected').val(foop[z]).remove().appendTo('#sel_info_conf'); 
    });
}); 
$('#remove_info').click(function() { 
    var foo = []; 
    $('#sel_info_conf option:selected').each(function(i, selected){ 
        foo[i] = $(selected).val(); 
        return !$('#sel_info_conf option:selected').val(foo[i]).remove().appendTo('#sel_info_pro'); 
    });
});

});

thanks everybody for help!