JS make a list of multiple select-options in textField

Question

 $().ready(function() {  
       $('#add').click(function() {  
        return !$('#select1 option:selected').remove().appendTo('#select2');  
       });  
       $('#remove').click(function() {  
        return !$('#select2 option:selected').remove().appendTo('#select1');  
       });  
      });

These two functions move selected options from one multiple select to another. I need to make a list with all added options' values(in #select2) in a input type hidden. And this input should be updated each time one of these functions is called.

May I ask why you want to copy them to a hidden field? Why not just use the values that #select2 has directly? — Christof, May 11 '12 at 14:11
Because I need to send all options' values that appear in #select2 via $_POST to another php page and send this data to mysql. — Martin, May 11 '12 at 14:13
@ Matt Ball - I haven't tried anything because my js is not good. — Martin, May 11 '12 at 14:20

topp · Accepted Answer · 2012-05-11T14:59:53.660

2

This should help

var yourInput = $('#IdOfYourInput');

$('#add').click(function() {  
    var opt = !$('#select1 option:selected').remove().appendTo('#select2');
    yourInput.val($('#select2 option').map(function(){return this.value;}).get().join(','));
    return opt;
});

Removing is analogous:

$('#remove').click(function() {
    var opt =$('#select2 option:selected').remove().appendTo('#select1');
    yourInput.val($('#select2 option').map(function(){return this.value;}).get().join(','));
    opt.appendTo('#select1');  
    return opt;
});

I hope this is what your were aiming for..

edited May 11 '12 at 14:59

answered May 11 '12 at 14:31

topp

150
1
8

var someContainer = $('.. create or look it up ..'); I should put here the input's ID right? – Martin May 11 '12 at 14:36
No, you probably want to store all your inputs in some
or
. This is the place to put the id of that element. If you have
then go with: var someContainer = $('#formForMyHiddenInputs'). Keep in mind that the form should already exist in your DOM structure -- just put an empty form somewhere in the code.
– topp May 11 '12 at 14:40
My idea is to make an and take all values from #select2 and list them in the separated with comma. – Martin May 11 '12 at 14:48

JS make a list of multiple select-options in textField

1 Answers1