Dependent Select Option With MySQLi Using jQuery PHP Script


Dependent Select Option With MySQLi Using jQuery PHP Script

The Dependent select option was build using jQuery / PHP. This simple source code will show you how to create a dependent select option driven by MySQLi database server. The select option is automatically generate whenever the user choose from the first selection. It retrieve the data within the database to display the result based on the selected value.

This is the sample code

 

<!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>
</html>

I hope the source code can help you to your projects and future projects. For more update and tutorial, just kindly visit this site. Enjoy coding!!

 

 

Read Me

 



Find More Dependent Select Option With MySQLi Using jQuery PHP Script

Have any Question or Comment?

Leave a Reply

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

Categories