Monday 7 September 2015

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
 

Sunday 6 September 2015

Menghapus Parameters url Dengan Javascript atau JQuery

Bagaimana caranya kita menghilangkan parameter pada url yang kita dan menggantinya dengan parameter yang baru dengan bantuan JQuery atau Javascript?

Misalnya kita punya alamat url seperti ini,
http://alamaturl.com?par1=asdwer&par2=poiuyt

1. Kita akan menghilangkan semua parameter yang ada di url diaatas dengan cara berikut
var url = alamaturl.com?par1=asdwer&par2=poiuyt
url = url.slice( 0, url.indexOf('?') ); 

   //hasilnya : http://alamaturl.com

2. Kita akan mengganti nama parameter ke dua (par2) beserta isinya dengan parameter ke 3 (par3),
var url = alamaturl.com?par1=asdwer&par2=poiuyt
url =  url.slice( 0, url.indexOf('&') );
url = url + "&par3=isipar3"; 
   //hasilnya : http://alamaturl.com?par1=asdwer&par3=isipar3