Saling ketergantungan negara bangsa adalah situasi model tradisional untuk menceritakan tentang perlunya ward dropdown. Kita dapat menambah panjang bangku pijakan menjadi 3, 4, dst
Ketika saya mendapat kesempatan untuk melakukan ini lebih dari 8 ward dropdown. Saya melakukan ini untuk saluran berburu dalam pemrograman administrasi material. Jika Anda melakukan ini sekali untuk beberapa dropdown lingkungan, idenya mirip dengan melakukannya untuk pengelompokan yang diperpanjang
Kami dapat mengatakan banyak contoh entitas dependen seperti itu, Kategori-Sub-kategori-Produk dalam aplikasi keranjang belanja, Departemen-Kursus dan banyak lagi
Tangkapan layar di bawah ini menunjukkan pengambilan data yang bergantung dinamis sedang berlangsung. Loader yang ditampilkan di dropdown negara dependen menunjukkannya
Setelah titik akhir mendapatkan data, skrip akan mengembalikan respons HTML dengan data dependen. Kemudian, callback pencapaian AJAX akan menumpuk reaksi ke tujuan. Pada screenshot berikut, kita bisa melihat hasil negara berdasarkan negara yang dipilih
Langkah 1. Buat Tabel dan Dummy Data
Pada langkah pertama kita perlu membuat database dan tabel untuk contoh dropdown dependen. Jadi pertama-tama Anda perlu membuat database "dropdown" di phpmyadmin Anda. Setelah berhasil membuat database, kami perlu membuat dua tabel baru "benua" dan "negara" menggunakan SQL Query di bawah ini
Langkah 2. Buat indeks. file php
Pada langkah ini kita akan membuat index. php, dalam file ini kita menulis kode untuk drop-down negara dan drop-down negara. Dalam tata letak file ini akan ditampilkan jadi letakkan kode di bawah ini pada index. file php
indeks. php
Dependant dropdown
Dependant dropdown using Ajax
<Continent
Country
Langkah 3. Tambahkan File Konfigurasi Basis Data
Sekarang kita perlu membuat file konfigurasi database untuk database, dengan begitu Anda dapat mengatur nama pengguna, kata sandi, database, dan host. Jadi mari kita membuat config. php dan letakkan kode di bawah ini
config. php
_
Langkah 4. Tambahkan File Ajax
Pada langkah terakhir, kita perlu membuat file dropdown ajax, dalam file ini kita menulis kode untuk data json drop-down negara ajax dinamis. Jadi mari kita buat get_subcat. php dan letakkan kode di bawah ini
Kotak pilih dependen dinamis digunakan untuk mengisi otomatis data dependen dalam daftar dropdown. Berdasarkan pilihan drop-down, data dependen diambil dari database dan ditampilkan di kotak pilihan berikutnya. Umumnya, kotak pilih dependen dinamis digunakan untuk mengimplementasikan fungsionalitas tarik-turun kota negara bagian. Menggunakan Ajax dan PHP, Anda dapat dengan mudah mengimplementasikan dropdown dependen dinamis tanpa penyegaran halaman
Dropdown dependen dinamis sangat berguna untuk mengambil data relasional dinamis dari database dan terdaftar di beberapa kotak pilihan. Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana mengimplementasikan dropdown relasional kota negara bagian menggunakan jQuery, Ajax, PHP, dan MySQL. Ini berarti bahwa negara terkait dengan negara dan kota terkait dengan negara. Berdasarkan perubahan negara & negara bagian, masing-masing negara bagian & kota diambil dari database tanpa memuat ulang halaman menggunakan jQuery, Ajax, PHP, dan MySQL
Kode contoh awalnya menunjukkan semua negara di dropdown negara. Ketika suatu negara dipilih, masing-masing negara bagian akan diambil dari database MySQL dan muncul di dropdown negara bagian. Sama halnya ketika sebuah negara bagian dipilih, masing-masing kota akan diambil dari database MySQL dan muncul di dropdown kota
Sebelum mulai membuat daftar dropdown dependen dinamis dengan PHP dan MySQL, lihat struktur file
dynamic_dependent_dropdown_php/ ├── dbConfig.php ├── index.php ├── ajaxData.php └── js/ └── jquery.min.jsBuat Tabel Database
Untuk menyimpan data negara, negara bagian, dan kota, diperlukan tiga tabel dalam database. Juga, akan ada tabel hubungan antara negara, negara bagian, dan kota. Tabel negara bagian memiliki relasi dengan tabel negara dan tabel kota memiliki relasi dengan tabel negara bagian
SQL berikut membuat tabel countries di database MySQL
CREATE TABLE `countries` ( `country_id` int(11) NOT NULL AUTO_INCREMENT, `country_name` varchar(50) CHARACTER SET utf8 NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`country_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;SQL berikut membuat tabel CREATE TABLE `countries` ( `country_id` int(11) NOT NULL AUTO_INCREMENT, `country_name` varchar(50) CHARACTER SET utf8 NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`country_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;_0 dengan bidang induk CREATE TABLE `countries` ( `country_id` int(11) NOT NULL AUTO_INCREMENT, `country_name` varchar(50) CHARACTER SET utf8 NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`country_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;1 di database MySQL
CREATE TABLE `states` ( `state_id` int(11) NOT NULL AUTO_INCREMENT, `country_id` int(11) NOT NULL, `state_name` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`state_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;_SQL berikut membuat tabel CREATE TABLE `countries` ( `country_id` int(11) NOT NULL AUTO_INCREMENT, `country_name` varchar(50) CHARACTER SET utf8 NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`country_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;_2 dengan bidang induk CREATE TABLE `countries` ( `country_id` int(11) NOT NULL AUTO_INCREMENT, `country_name` varchar(50) CHARACTER SET utf8 NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`country_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;3 di database MySQL
CREATE TABLE `cities` ( `city_id` int(11) NOT NULL AUTO_INCREMENT, `state_id` int(11) NOT NULL, `city_name` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`city_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;_Konfigurasi Basis Data (dbConfig. php)
Kode berikut digunakan untuk menghubungkan database menggunakan PHP dan MySQL. Tentukan host basis data (CREATE TABLE `countries` ( `country_id` int(11) NOT NULL AUTO_INCREMENT, `country_name` varchar(50) CHARACTER SET utf8 NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`country_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;4), nama pengguna (CREATE TABLE `countries` ( `country_id` int(11) NOT NULL AUTO_INCREMENT, `country_name` varchar(50) CHARACTER SET utf8 NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`country_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;5), kata sandi (CREATE TABLE `countries` ( `country_id` int(11) NOT NULL AUTO_INCREMENT, `country_name` varchar(50) CHARACTER SET utf8 NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`country_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;6), dan nama (CREATE TABLE `countries` ( `country_id` int(11) NOT NULL AUTO_INCREMENT, `country_name` varchar(50) CHARACTER SET utf8 NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive', PRIMARY KEY (`country_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;7) sesuai kredensial basis data Anda
// Database configuration$dbHost = "localhost";
$dbUsername = "root";
$dbPassword = "root";
$dbName = "codexworld";
// Create database connection
$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);
// Check connection
if ($db->connect_error) {
die("Connection failed: " . $db->connect_error);
}
Kotak Pilih Ketergantungan Dinamis (index. php)
Kode HTML & PHP
Awalnya, semua data negara diambil dari database dan terdaftar di dropdown negara. Setelah nilai dipilih di dropdown negara, masing-masing data akan dicantumkan di dropdown negara bagian dan kota
Kode JavaScript
Setelah suatu negara dipilih, negara bagian yang bergantung diambil dari skrip sisi server (CREATE TABLE `countries` (
`country_id` int(11) NOT NULL AUTO_INCREMENT,
`country_name` varchar(50) CHARACTER SET utf8 NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
PRIMARY KEY (`country_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;8) menggunakan jQuery dan Ajax. Demikian pula, dengan memilih negara bagian, kota-kota dependen diambil dari skrip sisi server (CREATE TABLE `countries` (
`country_id` int(11) NOT NULL AUTO_INCREMENT,
`country_name` varchar(50) CHARACTER SET utf8 NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
PRIMARY KEY (`country_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;8) menggunakan jQuery dan Ajax
JQuery diperlukan untuk menggunakan Ajax, jadi, sertakan library jQuery terlebih dahulu
Mulai permintaan Ajax untuk mengambil data dependen (negara bagian dan kota) dari database tanpa penyegaran halaman menggunakan jQuery
- Saat mengubah nilai di tarik-turun negara,
- POST IS negara yang dipilih ke skrip sisi server (ajax Data. php) melalui permintaan Ajax
- Daftar opsi kotak pilih diambil dari respons dan HTML diatur ke dropdown status dependen
- Saat mengubah nilai dalam dropdown status,
- POST ID negara bagian yang dipilih ke skrip sisi server (ajaxData. php) melalui permintaan Ajax
- Daftar opsi kotak pilih diambil dari respons Ajax dan HTML diatur ke dropdown kota yang bergantung
Mengambil Data Ketergantungan dari Database (ajaxData. php)
Data ajax. php dipanggil oleh permintaan Ajax untuk mengambil data dependen dari database menggunakan PHP dan MySQL. HTML dropdown negara bagian dan kota dikembalikan ke metode sukses permintaan Ajax
- Ambil ID dari permintaan Ajax menggunakan metode PHP $_POST
- Jika CREATE TABLE `countries` (
`country_id` int(11) NOT NULL AUTO_INCREMENT,
`country_name` varchar(50) CHARACTER SET utf8 NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
PRIMARY KEY (`country_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;_1 diberikan,
- Ambil data negara bagian berdasarkan ID negara tertentu dari database
- Hasilkan HTML dari daftar opsi negara bagian
- Jika CREATE TABLE `countries` (
`country_id` int(11) NOT NULL AUTO_INCREMENT,
`country_name` varchar(50) CHARACTER SET utf8 NOT NULL,
`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive',
PRIMARY KEY (`country_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;_3 diberikan,
- Ambil data kota berdasarkan ID negara tertentu dari database
- Hasilkan HTML dari daftar opsi kota
- Pilihan render dari daftar dropdown
include_once 'dbConfig.php';
if(!empty($_POST["country_id"])){
// Fetch state data based on the specific country
$query = "SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC";
$result = $db->query($query);
// Generate HTML of state options list
if($result->num_rows > 0){
echo '
// Generate HTML of city options list
if($result->num_rows > 0){
echo '
Posting dan Dapatkan Nilai Dropdown Ketergantungan Dinamis
Setelah pengiriman formulir, Anda bisa mendapatkan nilai kotak pilih tergantung dinamis menggunakan PHP. Gunakan metode $_POST untuk mengambil nilai opsi yang dipilih di PHP
Kode HTML
Kode PHP
if(isset($_POST['submit'])){echo 'Selected Country ID: '.$_POST['country'];
echo 'Selected State ID: '.$_POST['state'];
echo 'Selected City ID: '.$_POST['city'];
}
?>
Daftar Dropdown multi-pilih dengan Kotak Centang menggunakan jQuery
Kesimpulan
Kotak pilih dependen dinamis adalah elemen yang sangat berguna saat Anda ingin mengizinkan pengguna memilih nilai dari beberapa daftar dropdown. Dalam kode contoh, kami telah menunjukkan kotak pilih dependen dinamis untuk dropdown kota negara bagian di PHP. Anda dapat dengan mudah memperluas fungsionalitas kotak pilih yang bergantung dinamis dan mengimplementasikan dropdown kota negara bagian Ajax dengan PHP dan MySQL. Jika Anda memiliki banyak data, gunakan tipe data JSON di Ajax dan PHP untuk respon yang cepat
Apakah Anda ingin mendapatkan bantuan implementasi, atau memodifikasi atau meningkatkan fungsionalitas skrip ini?