The pilih opsi Dependent adalah membangun menggunakan jQuery / PHP. source code sederhana ini akan menunjukkan cara untuk membuat pilih opsi tergantung didorong oleh database server MySQLi. Pilih opsi otomatis menghasilkan setiap kali pengguna memilih dari pilihan pertama. Ini mengambil data dalam database untuk menampilkan hasil berdasarkan nilai yang dipilih.
Silahkan Copy Script Dibawah ini :
<!DOCTYPE html>
<?php
$conn = new mysqli('localhost', 'root', '', 'db_animal') or die(mysqli_error());
?>
<html lang = "eng">
<head>
<meta charset = "UTF-8" />
<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 = "<a href="https://www.sourcecodester.com">Sourcecodester</a>
" rel="nofollow">https://www.sourcecodester.com">Sourcecodester</a>
</a> </div>
</nav>
<div class = "container-fluid">
<div class = "row">
<div class = "col-md-3"></div>
<div class = "col-md-6 well">
<h4 class = "text-primary">Dependent Select Option With MySQLi Using PHP / jQuery</h4>
<hr style = "border-top: 1px dotted #8c8b8b;"/>
<form class = "form-inline">
<div class = "form-group">
<label>Animal Group:</label>
<select id = "group" class = "form-control" name = "animal-groupl" required = "required">
<option value = "">Select a group</option>
<?php
$g_animal = $conn->prepare("SELECT * FROM `animal` GROUP BY `animal_group`");
if($g_animal->execute()){
$g_result = $g_animal->get_result();
}
while($f_ganimal = $g_result->fetch_array()){
?>
<option value = "<?php echo $f_ganimal['animal_group']?>"><?php echo $f_ganimal['animal_group']?></option>
<?php
}
$conn->close();
?>
</select>
</div>
<div class = "form-group">
<label>Animal:</label>
<select id = "animal" name = "animal" class = "form-control" disabled = "disabled" required = "required">
<option value = "">Select an animal</option>
</select>
</div>
</form>
</div>
</div>
</div>
</body>
<script src = "js/jquery-3.1.1.js"></script>
<script type = "text/javascript">
$(document).ready(function(){
$('#group').on('change', function(){
if($('#group').val() == ""){
$('#animal').empty();
$('<option value = "">Select an animal</option>').appendTo('#animal');
$('#animal').attr('disabled', 'disabled');
}else{
$('#animal').removeAttr('disabled', 'disabled');
$('#animal').load('animal_get.php?animal_group=' + $('#group').val());
}
});
});
</script>
Saya berharap kode sumber dapat membantu Anda untuk proyek dan proyek-proyek masa depan. Untuk lebih update dan tutorial, hanya silakan kunjungi situs ini. Nikmati coding !!
