Memindahkan Isi Dari ListBox (Multiple Select) Yang Satu Ke ListBox Yang lain Dengan JQuery

Pada artikel ini akan dibahas bagaimana membuat 2 ListBox yang bisa saling melakukan pertukaran isinya dengan bantuan JQuery.
Pertama-tama buatlah 2 listbox atau multiple select dan 2 button seperti gambar berikut,

Berikut sintak HTML pembuatan listbox diatas,


<select name="select1" multiple="multiple" id="SelectLeft">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
    <option>item4</option>
    <option>item5</option>
 </select>
<input id="MoveRight" type="button" value=" >> "/>
<input id="MoveLeft" type="button" value=" << " />
<select name="select2" multiple="multiple" id="SelectRight"></select>

Jika sudah dibuatkan HTML listbox seperti diatas, buatlah sintak Javascript atau JQuery seperti berikut,

$("#MoveRight,#MoveLeft").click(function (event) {
  var id = $(event.target).attr("id");
  var selectFrom = id == "MoveRight" ? "#SelectLeft":"#SelectRight";
  var moveTo = id == "MoveRight" ? "#SelectRight" : "#SelectLeft";

  var selectedItems = $(selectFrom + " :selected").toArray();
  $(moveTo).append(selectedItems);
  selectedItems.remove;
  $("#SelectRight").find("option").prop("selected", true);
});

Untuk membuat terlihat rapi si Listbox nya tambahkan sedikit style CSS seperti berikut,

select {
    width:150px;
    height:100px;
}

Untuk lebih jelasnya bisa lihat contoh di link berikut

Semoga bermanfaat..