jQuery getting selected options issue

Question

I have 2 multi-select boxes that transfer to each other. The transfer both ways goes fine. I also call an ajax fn to submit the selected options to a database. The call from left to right works fine because I am just getting all the options, not just selected ones.

var domelts = $('#imfavs option');
// next translate that into an array of just the values
var buddylist = $.map(domelts, function(elt, i) { return $(elt).val();});

Now, when I try to go from right to left with just the selected options, it's always returning an empty array.

I tried 2 ways

var domelts = $('#imfavs :selected');
var removelist = $.map(domelts, function(elt, i) { return $(elt).val();});

$('#imfavs :selected').each(function (x) {
   removelist[x] = $(this).val();
});

for the 2nd one, removelist is var'd before.

My HTML

  <form  method="post" name="frmFavs" id="frmFavs">
   <table>
    <tr>
     <td><strong>Current Friends</strong></td>
     <td>&nbsp;</td>
     <td><strong>SLS Chat Friends</strong></td>
     <td>&nbsp;</td>                        
    </tr>
    <tr>
     <td>
      <select name="userfavs" multiple="multiple" size="25" id="userfavs">
       <cfoutput query="userfavs"><option value="#encrypt(userfavs.user2id,application.key,'DES','Hex')#">#userfavs.user2#</option></cfoutput>
      </select>
     </td>
     <td>
      <button type="button" style="height:100px;" id="add">&gt;</button><br />
      <button type="button" style="height:100px;" id="remove">&lt;</button>
     </td>
     <td>
      <select name="imfavs" multiple="multiple" size="25" id="imfavs"></select>
     </td>
                <td valign="middle"><div id="info"></div></td>
    </tr>
   </table>
  </form>

Any help appreciated.

Thanks.

Answer 1

instead of

var domelts = $('#imfavs :selected');

try

var domelts = $('#imfavs option:selected');

Answer 2

I tried out your code and it seemed to work ok.

Check and make sure the options have value attributes.

<option value="value1">value1</option>