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

 

 


Related Post


FB Inboxer v4.0 – Master Facebook Messenger ... FB Inboxer v4.0 - Master Facebook Messenger Marketing SoftwareFB Inboxer v4.0 - Master Facebook Messenger Marketing Software Facebook Inboxer is a ...
Open Journal Systems v2.4.7-1 PHP Script Download Open Journal Systems v2.4.7-1 PHP Script Download Open Journal Systems (OJS) is a journal management and publishing system that has been developed ...
TYPO3 CMS v9.3.1 PHP Script Download TYPO3 CMS v9.3.1 PHP Script Download TYPO3 is a professional Content Management Framework. Frontend: Automatic navigation generation; Pages can be ...
Private Message System PHP Script Private Message System PHP Script This is a private messaging system where you can send message to any members who have an account of this site and...
YouTube Automated CMS PHP Script Download YouTube Automated CMSYouTube Automated CMS YouTube automated CMS builds your video cms that depends on youtube.com videos quickly and easily. De...

Read Me

Have any Question or Comment?

Leave a Reply

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