Membuat select option dari array, set width element, dan memindahkan select option ke element select lainnya


Element select dengan attribute multiple memungkinkan kita untuk memilih banyak option yang tersedia, tetapi jika element select tersebut memiliki banyak (mungkin ratusan atau ribuan) option, sangat sulit untuk memilih option yang kita inginkan jika option itu letaknya tidak berurutan.


Salah satu cara yang paling sering digunakan adalah menggunakan 2 element select, dimana element pertama menampung data awal dan element kedua menampung data dari option yang telah kita pilih.

Pertama, kita membuat 2 buah select dan 2 buah button

<strong>All Team</strong><br>
<select name="allTeam" id="allTeam" multiple size="10"></select>

<br><br>
<input type="button" name="add" id="add" value="add">
<br>
<input type="button" name="remove" id="remove" value="remove">
<br><br>

<strong>Selected Team</strong><br>
<select name="selectedTeam" id="selectedTeam" multiple size="10"></select>

allTeam untuk menampung data awal, selectedTeam untuk menampung option yang dipilih (dipindahkan dari allTeam), button add untuk memindahkan dari allTeam ke selectedTeam, dan button remove untuk memindahkan dari selectedTeam ke allTeam.

jsfiddle

Untuk data awal ini, kita menggunakan value dari array.

<strong>All Team</strong><br>
<select name="allTeam" id="allTeam" multiple size="10"></select>

<br><br>
<input type="button" name="add" id="add" value="add">
<br>
<input type="button" name="remove" id="remove" value="remove">
<br><br>

<strong>Selected Team</strong><br>
<select name="selectedTeam" id="selectedTeam" multiple size="10"></select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script>
$( function() {

	// array of #allTeam select's option
	var jQueryTeam = [
		"Adam Sontag",
		"Dan Heberden",
		"Dave Methvin",
		"Doug Neiner",
		"John Resig",
		"Jörn Zaefferer",
		"Karl Swedberg",
		"Leah Silber",
		"Mike Alsup",
		"Paul Irish",
		"Ralph Whitbeck",
		"Rey Bango",
		"Richard D. Worth",
		"Scott González",
		"Scott Jehl",
		"Todd Parker",
		"Yehuda Katz"
	];
	
	// append jQueryTeam array to #allTeam
	$.each(jQueryTeam, function(index, value) {
		$("#allTeam").append(
			$("<option></option>").val(value).html(value)
		);
	});
});

Dengan adanya data awal ini, kita bisa mendapatkan width sebenarnya dari element allTeam yang akan kita pergunakan juga sebagai width dari element lainnya.

jsfiddle

<strong>All Team</strong><br>
<select name="allTeam" id="allTeam" multiple size="10"></select>

<br><br>
<input type="button" name="add" id="add" value="add">
<br>
<input type="button" name="remove" id="remove" value="remove">
<br><br>

<strong>Selected Team</strong><br>
<select name="selectedTeam" id="selectedTeam" multiple size="10"></select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script>
$( function() {

	// array of #allTeam select's option
	var jQueryTeam = [
		"Adam Sontag",
		"Dan Heberden",
		"Dave Methvin",
		"Doug Neiner",
		"John Resig",
		"Jörn Zaefferer",
		"Karl Swedberg",
		"Leah Silber",
		"Mike Alsup",
		"Paul Irish",
		"Ralph Whitbeck",
		"Rey Bango",
		"Richard D. Worth",
		"Scott González",
		"Scott Jehl",
		"Todd Parker",
		"Yehuda Katz"
	];
	
	// append jQueryTeam array to #allTeam
	$.each(jQueryTeam, function(index, value) {
		$("#allTeam").append(
			$("<option></option>").val(value).html(value)
		);
	});
	
	// set width for every element (also reset #allTeam width), based on #allTeam width
	$("#add, #remove, #allTeam, #selectedTeam").css("width", $("#allTeam").width());
});
</script>

Di sini, kita menset ulang width dari allTeam, untuk memastikan semua element memiliki width sama

jsfiddle

Dan yang terakhir, kita men-attach click event untuk button add dan remove. Berikut ini source code lengkapnya

<strong>All Team</strong><br>
<select name="allTeam" id="allTeam" multiple size="10"></select>

<br><br>
<input type="button" name="add" id="add" value="add">
<br>
<input type="button" name="remove" id="remove" value="remove">
<br><br>

<strong>Selected Team</strong><br>
<select name="selectedTeam" id="selectedTeam" multiple size="10"></select>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script>
$( function() {

	// array of #allTeam select's option
	var jQueryTeam = [
		"Adam Sontag",
		"Dan Heberden",
		"Dave Methvin",
		"Doug Neiner",
		"John Resig",
		"Jörn Zaefferer",
		"Karl Swedberg",
		"Leah Silber",
		"Mike Alsup",
		"Paul Irish",
		"Ralph Whitbeck",
		"Rey Bango",
		"Richard D. Worth",
		"Scott González",
		"Scott Jehl",
		"Todd Parker",
		"Yehuda Katz"
	];
	
	// append jQueryTeam array to #allTeam
	$.each(jQueryTeam, function(index, value) {
		$("#allTeam").append(
			$("<option></option>").val(value).html(value)
		);
	});
	
	// set width for every element (also reset #allTeam width), based on #allTeam width
	$("#add, #remove, #allTeam, #selectedTeam").css("width", $("#allTeam").width());
	
	// move selected option #allTeam to #selectedTeam
	$("#add").click( function() {
		$("#allTeam option:selected").clone().appendTo("#selectedTeam");
		$("#allTeam option:selected").each( function() {
			$(this).remove();
		});
	});
	
	// move selected option #selectedTeam to #allTeam
	$("#remove").click( function() {
		$("#selectedTeam option:selected").clone().appendTo("#allTeam");
		$("#selectedTeam option:selected").each( function() {
			$(this).remove();
		});
	});
});
</script>

jsfiddle

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: