Mungkin bagi sebagian sudah tidak asing dengan fitur yang sudah disediakan oleh jQuery UI ini. tapi saya akan mencoba membuat sebuah form multi select dan membaca inputan atas pilihan kita pada form tersebut.
form ini sangat berguna ketika kita ingin memilih banyak data, konsep kerja seperti dropdown, hanya saja dengan ini kita bisa memilih inputan lebih dari 1.
langsung saja berikut kodenya
index.html
<html>
<head>
<title>Multi Select</title>
<link rel="stylesheet" href="multiselect/docsupport/style.css">
<link rel="stylesheet" href="multiselect/docsupport/prism.css">
<link rel="stylesheet" href="multiselect/chosen.css">
<style type="text/css" media="all">
/* fix rtl for demo */
.chosen-rtl .chosen-drop { left: -9000px; }
</style>
</head>
<body>
<div id="container">
<div id="content">
<form method="post" action="proses.php">
<?php
$array = array("1"=>"deden","2"=>"rahmi");
echo form_multiselect('isi[] data-placeholder="Choose a Country..." class="chosen-select" multiple style="width:350px;" tabindex="4"',$array);
?>
<input type="submit">
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="multiselect/chosen.jquery.js" type="text/javascript"></script>
<script src="multiselect/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
</script>
</body>
</html>
untuk source plugin akan dilampirkan pada bagian akhir artikel ini.
lalu buat proses php untuk membaca inputannya
proses.php
<?php
foreach($_POST['isi'] as $row){
echo $row;
}
?>
selamat mencoba , semoga bermanfaat.
link download http://www.4shared.com/zip/5hjI1_28ba/multiselect.html
No comments:
Post a Comment