Google Ads

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

Video Chat PHP Script Download Video Chat Video Chat Video Chat is a web application developed on PHP, MySQL, jQuery using OpenTok API. Today they provide API access to build face-t...
Monitoring of Students Cyber Accounts PHP Script Monitoring of Students Cyber Accounts PHP Script FEATURES Login Logout Add Update Delete Search Print Upload USE...
Live Support Chat v3.7 – Live Chat 3 PHP Scr... Live Support Chat v3.7 - Live Chat 3 PHP Script It’s beautiful, simple and it works! Live Chat 3 will get you closer to your website visitors and e...
HRM With Billing & Accounting Software PHP Sc... HRM With Billing & Accounting SoftwareHRM With Billing & Accounting SoftwareClient management Team management Informsative dashboard File sharing and ...
Easy and Simple Add, Edit, Delete MySQL Table Rows... Easy and Simple Add, Edit, Delete MySQL Table Rows using PHP/MySQL PHP Script In this tutorial, I will show you how to create a simple add, edit an...

Have any Question or Comment?

Leave a Reply

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