Javascript Aplikasi Simple Multiple Select Dropdown

select multiple

Kali ini kami akan share bagaimana membuat aplikasi Javascript simple multiple select dropdown. Script ini akan mengubah opsi pilih HTML menjadi pilihan tarik turun lanjutan. Script itu sendiri digunakan dipilih untuk menambahkan atribut yang memungkinkan Anda untuk memiliki kontrol penuh dari opsi pilih html Anda, dan memicu beberapa peristiwa pada bidang pilih asli untuk memanggil perilaku tertentu.

Langsung saja mari masuk kedalam pembahasan inti.

Buat file dengan nama index.html file ini sebagai form utama.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" type="text/css" href="css/chosen.css" />
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://jasawebsite.ooo">Jasawebsite</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">JavaScript - Simple Multiple Dropdown Selection</h3>
		<hr style="border-top:1px dotted #ccc;"/> 
		<div class="form-group">
			<div class="col-md-3"></div>
			<div class="col-md-6">
				<select data-placeholder="Select an option" id="data" class="chzn-select form-control" multiple="multiple"> 
					<option value="Python">Python</option>	
					<option value="PHP">PHP</option>
					<option value="JavaScript">JavaScript</option>	
					<option value="C#">C#</option>	
					<option value="C++">C++</option>
				</select>
				<br /><br />
				<center><button type="button" class="btn btn-primary" id="submit">Submit</button></center>
			</div>
		</div>
	</div>  
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.js"></script>
<script src="js/script.js"></script>
</body>
</html>

Buat file dengan nama script.js script ini akan mengubah pemilihan HTML asli menjadi pilihan dropdown.

$(".chzn-select").chosen(); 
$(".chzn-select-deselect").chosen({
	allow_single_deselect:true
});

$('#submit').on('click', function(){
	alert("You select: "+$('#data').val());
});

Kalian bisa langsung mendownload filenya pada link button dibawah ini.

Sekian share singkat kali ini semoga apa yang kami share bermanfaat bagi anda.

Leave a Reply

Your email address will not be published. Required fields are marked *