Populate Dropdown Using jQuery Ajax PHP
Last Updated : Mar 11, 2024
IN - jQuery Ajax PHP | Written & Updated By - Amruta
In this article we will show you the solution of populate dropdown using jQuery ajax PHP, the value of the nation option that was chosen is sent to the server by the jQuery script above.
The "process-request.php" code receives the returned information soon as the request is handled by the server and generates a drop-down list of cities.
A list box can be extended by adding records from a database table. JSON strings will be returned from the table, and options will be added to the list box with jQuery.
By using Ajax to pull data from MySQL, or by populating the first, second, and third dropdowns in PHP based on the selection of the first and second dropdowns.
Furthermore, you will learn how to use jQuery ajax to fetch data from the database into the dropdown list.
Step By Step Guide On Populate Dropdown Using jQuery Ajax PHP :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("select.country").change(function(){
var selectedCountry = $(".country option:selected").val();
$.ajax({
type: "POST",
url: "process-request.php",
data: { country : selectedCountry }
}).done(function(data){
$("#response").html(data);
});
});
});
</script>
</head>
<body>
<form>
<table>
<tr>
<td>
<label>Country:</label>
<select class="country">
<option>Select</option>
<option value="usa">United States</option>
<option value="india">India</option>
<option value="uk">United Kingdom</option>
</select>
</td>
<td id="response">
</td>
</tr>
</table>
</form>
</body>
</html>
- To begin, we need to write <HTML>, which tells the browser what version of HTML we're using. In an HTML document, the first element is a tag.
- You should use the <head> tag to describe the project's heading. A difference between the title and the final brackets is that the title is open, whereas the final brackets are closed. A step-by-step style sheet is an external style sheet that displays on a website based on the URL or path of the page.
- Setting the font's size and weight is the next stage.
- Our next step is to close our eyes while we style.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- Once the script has been closed, it is terminated.
- Then again, the <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script creates variables for the data.
- The script is then closed and head closed.
- A body tag, describing the webpage's contents, follows. Here is where the website's content is written.
- A table is created by using a table draw, a table row, an option, and a label.
- After we close the table, we close the form, and we close the body, then we close the HTML.
Conclusion :-
Ajax functionality is used on many websites during registration to populate the state or city dropdown based on the value of the country dropdown selected by the user.
The jQuery ajax() technique can assist you in achieving this in any server-side programming language, such as PHP.
I hope this article on populate dropdown using jQuery ajax PHP helps you and the steps and method mentioned above are easy to follow and implement.
About Amruta
