- 1 - Download API https://github.com/IrfanGhuori/Dynamically-Selector/archive/refs/heads/master.zip
- 2 - Upload the API zip folder to your web server public_html directory, using FTP or File Manager.
- 3 - Create a MySQL database for API or use an existing database for API.
- 4 - Ran installation file path: www.yourDomain.com/api/installer/
- 5 - After installation delete installer folders
- 1 - Go your phpMyAdmin
- 2 - Dropdown 4 columns Name "city","country","key","state"
- 3 - Delete Folder name -> App folder, Dist folder, and file api.html
- 1 - Generate your API key and save it on a notepad!
- 2 - Paste your API key in the Ajax script after the URL path Example: URL: '../api/app/api_countries.php?key=YourKeyHere'.
- 3 - If you forgot the copy key. You can copy it from your database column name "key".
- 1 - Copy the HTML code.
- 2 - It is designed with Bootstrap 4, so you can easily customize it.
- 3 - Add the fetcher.js after the jQuery library.
<script src="YourDomain.com/dist/js/fetcher.js"></script>
- 4 - Copy the Ajax code and place it after the jQuery library.
<script>
$(document).ready(function () {
jQuery.ajax({
type: 'post',
url: '../api/app/api_countries.php?key=Your-API-Key',
success: function (countries) {
if (countries.status == "connected") {
$.each(countries.data, function (ind, co) {
jQuery('#country').append("" + co.name + "");
});
} else if (countries.status == "error") {
$('.alert-danger').fadeIn();
$('#message').append(countries.message);
}
}
});
});
</script>
- 5 - Copy the HTML code and place it where you want it to appear.
<div class="row">
<div class="col-sm-4">
<div class="form-group">
<label for="country">Country</label>
<select class="form-control" id="country">
<option value="-1">Select Country</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="state">State</label>
<select class="form-control" id="state">
<option>Select State</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="city">City</label>
<select class="form-control" id="city">
<option>Select City</option>
</select>
</div>
</div>
</div>
Note: `Videos tutorials are available in this project folder download and watch them for easily use this smart API Suggest me for it or if asking something about it