Cara Membuat Dropdown menggunakan Jquery dan OOP

Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini saya akan membahas tentang Cara Membuat Dropdown menggunakan Jquery dan OOP. Menambahkan dropdown Dependent akan menjadi fitur yang sangat berguna . Sebagai contoh, jika kita perlu daftar posting berdasarkan kategorinya maka kita dapat memiliki dropdown kategori-posting dependen. Dalam tutorial ini, kita akan membuat dropdown daftar nama negara-negara . Untuk mengubah nilai dropdown negara, opsi dropdown negara dimuat secara dinamis. Saya menggunakan jQuery AJAX untuk mendapatkan opsi pilahan untuk dropdown daftar nama negara berdasarkan negara yang dipilih.

Kode HTML untuk Dropdown

Kode HTML berikut berisi dropdown untuk nama – nama negara dan negara bagian. Pilihan negara dibaca dari database dan ditampilkan dalam dropdown pada pemuatan halaman. Awalnya, dropdown negara tidak memiliki opsi. Pada saat mengubah nilai dropdown nama negara  negara, fungsi jQuery dipanggil untuk mendapatkan opsi status dependen dan dimuat secara dinamis.

<?php
	require_once("dbcontroller.php");
	$db_handle = new DBController();
	$query ="SELECT * FROM country";
	$results = $db_handle->runQuery($query);
?>
<html>
<head>
<TITLE>c</TITLE>
<head>
	<style>
		body{width:610px;font-family:calibri;}
		.frmDronpDown {border: 1px solid #7ddaff;background-color:#C8EEFD;margin: 2px 0px;padding:40px;border-radius:4px;}
		.demoInputBox {padding: 10px;border: #bdbdbd 1px solid;border-radius: 4px;background-color: #FFF;width: 50%;}
		.row{padding-bottom:15px;}
	</style>
	
</head>
<body>
	<div class="frmDronpDown">
		<div class="row">
			<label>Country:</label><br/>
				<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
					<option value="">Select Country</option>

					<?php
						foreach($results as $country) {
					?>

					<option value="<?php echo $country["id"]; ?>"><?php echo $country["country_name"]; ?></option>
					<?php } ?>
				</select>
		</div>
		<div class="row">

			<label>State:</label><br/>
			<select name="state" id="state-list" class="demoInputBox">
				<option value="">Select State</option>
			</select>

		</div>
	</div>
</body>
</html>

Mendapatkan data menggunakan jQuery AJAX

Script jQuery berikut ini menunjukkan fungsi untuk mengirim permintaan AJAX ke PHP untuk membaca daftar negara tergantung pada negara yang dipilih. Panggilan AJAX ini diatur dengan ID negara yang dipilih.

<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
	<script>
		function getState(val) {
			$.ajax({
			type: "POST",
			url: "get_state.php",
			data:'country_id='+val,
			success: function(data){
				$("#state-list").html(data);
			}
			});
		}

		function selectCountry(val) {
		$("#search-box").val(val);
		$("#suggesstion-box").hide();
		}
	</script>

Script untuk membaca Database Negara menggunakan PHP

Dalam PHP, ia menghubungkan database untuk mengambil nilai-nilai pada tabel “negara”  berdasarkan pada id negara yang dilakukan oleh panggilan AJAX jQuery. Ini membentuk opsi dropdown negara dan kembali sebagai respons AJAX. Tanggapan ini dimasukkan ke dropdown negara bagian.

<?php
require_once("dbcontroller.php");
$db_handle = new DBController();
if(!empty($_POST["country_id"])) {
	$query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'";
	$results = $db_handle->runQuery($query);
?>
	<option value="">Select State</option>
<?php
	foreach($results as $state) {
?>
	<option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option>
<?php
	}
}
?>

File koneksi,

<?php
class DBController {
	private $host = "localhost:3307";
	private $user = "dumetschool";
	private $password = "dumetschool";
	private $database = "artikel_mp";
	private $conn;
	
	function __construct() {
		$this->conn = $this->connectDB();
	}
	
	function connectDB() {
		$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
		return $conn;
	}
	
	function runQuery($query) {
		$result = mysqli_query($this->conn,$query);
		while($row=mysqli_fetch_assoc($result)) {
			$resultset[] = $row;
		}		
		if(!empty($resultset))
			return $resultset;
	}
	
	function numRows($query) {
		$result  = mysqli_query($this->conn,$query);
		$rowcount = mysqli_num_rows($result);
		return $rowcount;	
	}
}
?>

berikut screenshot hasil dari codingan di atas,

Oke itulah tadi pembahasan saya tentang Cara Membuat Dropdown menggunakan Jquery dan OOP, semoga bermanfaat.