Serializing Dual Listbox

by dhavaljani

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="col-xs-4">
    Items to select
    <select id="lstBox1" multiple="multiple" class="form-control" size=10>
    <option value="	1	">	Adrianna Quintero	</option>
<option value="	2	">	Aila Vickers	</option>
<option value="	3	">	Aled Cline	</option>
<option value="	4	">	Alistair Casey	</option>
<option value="	5	">	Alysia Nelson	</option>
<option value="	6	">	Aminah Connor	</option>
<option value="	7	">	Anthony Lott	</option>
<option value="	8	">	Aqsa Ashley	</option>
<option value="	9	">	Arron Stokes	</option>
<option value="	10	">	Ayaz Magana	</option>
<option value="	11	">	Brielle Bates	</option>
<option value="	12	">	Carlton Cabrera	</option>
<option value="	13	">	Damian Long	</option>
<option value="	14	">	Dania Rosas	</option>
<option value="	15	">	Dawud Flynn	</option>
<option value="	16	">	Earl Charlton	</option>
<option value="	17	">	Elspeth Daniel	</option>
<option value="	18	">	Fahima Dunne	</option>
<option value="	19	">	Farrah Thomson	</option>
<option value="	20	">	Fletcher Watkins	</option>
<option value="	21	">	Freya Whitfield	</option>
<option value="	22	">	Frida Dillon	</option>
<option value="	23	">	Gia Higgins	</option>
<option value="	24	">	Gwen Traynor	</option>
<option value="	25	">	Ikra Derrick	</option>
<option value="	26	">	Jena Wiggins	</option>
<option value="	27	">	Jobe Reese	</option>
<option value="	28	">	Jolene Stubbs	</option>
<option value="	29	">	Keanan Stephens	</option>
<option value="	30	">	Kelsea Penn	</option>
<option value="	31	">	Khaleesi Guzman	</option>
<option value="	32	">	Kiki Clarkson	</option>
<option value="	33	">	Kingsley Clemons	</option>
<option value="	34	">	Leila Friedman	</option>
<option value="	35	">	Lilly-Ann Hurley	</option>
<option value="	36	">	Macie Mccullough	</option>
<option value="	37	">	Matilda...

JavaScript

$(document).ready(function() {
    $('#btnRight').click(function(e) {
        var selectedOpts = $('#lstBox1 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        $('#lstBox2').append($(selectedOpts).clone());
        //$(selectedOpts).remove();
        e.preventDefault();
        updateIDs();
    });

    $('#btnLeft').click(function(e) {
        var selectedOpts = $('#lstBox2 option:selected');
        if (selectedOpts.length == 0) {
            alert("Nothing to move.");
            e.preventDefault();
        }

        //$('#lstBox1').append($(selectedOpts).clone());
        $(selectedOpts).remove();
        e.preventDefault();
        updateIDs();
    });
});

function updateIDs(){
    $('#values').val('');
   $('#lstBox2 option').each(function(index) {
       console.log($(this).val());
       $('#values').val($('#values').val()+$(this).val()+",");
    });
}