Skip to content

IrfanGhuori/Dynamically-Selector

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

_Country State City Dropdown _

Installation

Uninstall API

  • 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

API Key

  • 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".

Use API

  • 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.

Watch Demo

<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