Kotak Drop-Down Populasi Secara Dinamik
Teknik popular yang digunakan dalam pembangunan web adalah untuk mencipta borang web interaktif di mana kotak drop-down boleh dipaparkan pilihan yang bergantung pada nilai yang dipilih bagi kotak lungsur turun sebelumnya. Kefungsian ini biasanya dicapai menggunakan gabungan JavaScript (jQuery) dan skrip sisi pelayan (PHP).
Contoh Penjelasan Kod
Dalam senario khusus ini, anda cuba mengisi kotak drop-down kedua berdasarkan nilai yang dipilih dalam kotak drop-down pertama. Kod yang disediakan menyelesaikannya dengan menggunakan langkah berikut:
-
Merakam Pilihan Pengguna: Apabila pengguna menukar pemilihan dalam kotak lungsur pertama, pengendali acara jQuery adalah dicetuskan. Pengendali ini menangkap nilai pilihan yang dipilih menggunakan $(this).val().
-
Menghantar Permintaan: Menggunakan keupayaan AJAX jQuery, permintaan tak segerak dihantar ke bahagian pelayan Skrip PHP, another_php_file.php. Bersama-sama dengan permintaan, nilai sel_stud pilihan yang dipilih dihantar sebagai data.
-
Pemprosesan Bahagian Pelayan: Skrip_php_file.php yang lain menerima data yang disiarkan, melaksanakan pertanyaan pangkalan data yang diperlukan untuk dapatkan semula data yang berkaitan khusus untuk pilihan yang dipilih, dan kumpulkan respons yang mengandungi penanda HTML untuk lungsur turun kedua yang dikemas kini box.
-
Mengemas kini Kotak Drop-Down: Respons yang diterima daripada pelayan diproses oleh fungsi pengendali kejayaan AJAX. Penanda HTML untuk kotak lungsur turun kedua disuntik ke dalam DOM menggunakan $('#LaDIV').html(whatigot);.
Contoh Tersuai
Contoh kod ini menunjukkan pelaksanaan tersuai di mana kotak lungsur pertama digunakan untuk memilih nama pelajar. Apabila dipilih, kotak lungsur kedua memaparkan kelas yang sepadan yang diajar oleh pelajar tersebut.
penguji.php
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#stSelect').change(function() {
var sel_stud = $(this).val();
$.ajax({
type: "POST",
url: "another_php_file.php",
data: 'theOption=' + sel_stud,
success: function(whatigot) {
$('#LaDIV').html(whatigot);
}
});
});
});
</script>
</head>
<body>
<select name="students">another_php_file.php
<?php
// Database Connection
$server = 'localhost';
$login = 'root';
$pword = '';
$dbname = 'test';
mysql_connect($server,$login,$pword) or die($connect_error);
mysql_select_db($dbname) or die($connect_error);
// Get POST Data
$selStudent = $_POST['theOption'];
// Query Database
$query = "SELECT * FROM `class` WHERE `teacher_id` = $selStudent";
$result = mysql_query($query) or die('Fn Error: ' . mysql_error());
$num_rows_returned = mysql_num_rows($result);
// Build Response HTML
$r = '
<select>
';
if ($num_rows_returned > 0) {
while ($row = mysql_fetch_assoc($result)) {
$r = $r . '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
}
} else {
$r = '<p>No classes taught by this student</p>';
}
// Echo Response
echo $r;
?>
Penyelesaian tersuai ini menyesuaikan kotak lungsur kedua untuk memaparkan kelas berdasarkan pelajar yang dipilih, memberikan pengalaman bentuk yang fleksibel dan mesra pengguna untuk kotak lungsur yang dihuni secara dinamik.
Atas ialah kandungan terperinci Bagaimanakah saya boleh mengisi kotak lungsur kedua secara dinamik berdasarkan pemilihan dalam kotak lungsur pertama menggunakan jQuery dan PHP?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!