Skip to content

Instantly share code, notes, and snippets.

@erowsika

erowsika/jquery cascade input select.php

Created November 16, 2021 07:11
Show Gist options
  • Save erowsika/510c5d225fa06917b43d511bf4f13d3a to your computer and use it in GitHub Desktop.
Save erowsika/510c5d225fa06917b43d511bf4f13d3a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jquery cascade input select.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<main>
<div>
<label>Pilih Kabupaten</label>
<select name="kabupaten" id="kabupaten">
<option value="-1" selected disabled>Pilihan</option>
<?php for ($i=0; $i<3; $i++) { ?>
<option value="<?php echo $i; ?>">kabupaten<?php echo $i; ?></option>
<?php } ?>
</select>
</div>
<div>
<label>Pilih Kecamatan</label>
<select name="kecamatan" id="kecamatan" disabled>
</select>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script>
$(document).ready(function () {
var elKec = $('#kecamatan');
var dataKec = [
[
'kecamatan 0.1',
'kecamatan 0.2',
'kecamatan 0.3',
'kecamatan 0.4',
'kecamatan 0.5',
],
[
'kecamatan 1.1',
'kecamatan 1.2',
'kecamatan 1.3',
'kecamatan 1.4',
'kecamatan 1.5',
],
[
'kecamatan 2.1',
'kecamatan 2.2',
'kecamatan 2.3',
'kecamatan 2.4',
'kecamatan 2.5',
],
];
$('#kabupaten').on('change', function () {
var key = $(this).val();
elKec.prop('disabled', false);
// reset
elKec.html('');
$(dataKec[key]).each(function (index, value) {
elKec.append(
'<option>'+ value +'</option>'
)
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment