Giống như đã nói, bạn có thể sử dụng Ajax. Có một cách không phải là Ajax tĩnh, nhưng bằng cách này, nó tốt hơn về lâu dài.
Về cơ bản, những gì bạn làm với jQuery đó là lắng nghe một sự thay đổi trong hộp chọn lục địa và khi thay đổi xảy ra, bạn sẽ yêu cầu máy chủ hỏi: "Đưa cho tôi tất cả các quốc gia trong lục địa này". Bạn nên có một cơ sở dữ liệu cho việc này hoặc bạn có thể ánh xạ chúng trong các đối tượng tĩnh chỉ để kiểm tra nó.
$['.continent'].change[function[] {
var id = $[this].val[]; //get the current value's option
$.ajax[{
type:'POST',
url:'/getCountries',
data:{'id':id},
success:function[data]{
//in here, for simplicity, you can substitue the HTML for a brand new select box for countries
//1.
$[".countries_container"].html[data];
//2.
// iterate through objects and build HTML here
}
}];
}];
Điều này tất nhiên sẽ khiến bạn thêm countries_container trong HTML thích và bên trong nó, bạn sẽ hiển thị select:
Bây giờ ở phía máy chủ mã PHP thực tế [getCountries], bạn có thể làm một cái gì đó như:
$id = $_POST['id'];
if[isset[$id] && ]]{
// 1. your query to get countries from a given continent
// and for each result you can build the HTML itself
// 2. OR, a better solution is to return an Object and then in the
// success:function[data]{ } iterate through it
}
Mã này có thể thách thức nhất được cải thiện, nhưng tôi đã cố gắng giải thích nó theo một cách dễ hiểu.
Ngoài ra, bạn nên kiểm tra:
JQuery Ajax Fopulation Dropdown với dữ liệu phản hồi JSON
Bản demo của danh sách thả xuống được liên kết bằng cách sử dụng AJAX & PHP
Hãy nhớ rằng, đây là những kết quả đầu tiên từ tìm kiếm của Google do đó, lần tới, hãy cố gắng tìm kiếm trong bản thân Stack Overflow để tránh các câu hỏi trùng lặp.try to search within stack overflow itself to avoid duplicate questions.
bởi Vincy. Sửa đổi lần cuối vào ngày 8 tháng 7 năm 2022.
Các thả xuống phụ thuộc là nhiều trường thả xuống có giá trị phụ thuộc vào sự thả xuống khác và chúng được tải động dựa trên lựa chọn người dùng. Dữ liệu dựa trên đó các tùy chọn thả xuống phụ thuộc được tải có thể được cung cấp dưới dạng đầu vào hoặc được tính toán theo ngữ pháp.
Ví dụ: nếu chúng tôi muốn hiển thị ngôn ngữ ngôn ngữ trong một thả xuống phụ thuộc vào khu vực, chúng tôi có thể cung cấp khu vực làm đầu vào hoặc tính toán theo chương trình khu vực bằng cách sử dụng Dịch vụ GEO.
Xem bản demo
Chúng ta đã thấy cách tải thả xuống phụ thuộc dựa trên các giá trị đã chọn của một danh sách thả xuống khác. Chúng ta có thể tạo dòng thác phụ thuộc & nbsp; Dropdown như chúng ta đã thấy ở ví dụ: Dropdown phụ thuộc vào thành phố quốc gia & NBSP; Dropdown.
Trong bài viết này, chúng ta sẽ thấy cách tải các tùy chọn thả xuống phụ thuộc dựa trên nhiều giá trị được chọn trong một thả xuống khác.
Trong ví dụ này, tôi đã cho thấy danh sách quốc gia trong một bản thả xuống nhiều lựa chọn. Khi thay đổi thả xuống này, tôi gọi JQuery AJAX để yêu cầu tệp PHP. Trong tệp PHP này, tôi đã nhận được tên quốc gia được chọn và đăng qua yêu cầu AJAX.
Dựa trên kết quả quốc gia đã chọn, tôi kết nối cơ sở dữ liệu để tìm nạp kết quả trạng thái. Chúng tôi có thể chọn nhiều giá trị từ thả xuống quốc gia và các giá trị được đăng dưới dạng mảng. Tôi đã nổ ra tên quốc gia được đăng và áp dụng MYSQL trong mệnh đề để chuyển các giá trị này cho truy vấn được chọn.
Ảnh chụp màn hình này cho thấy đầu ra của ví dụ phụ thuộc nhiều lựa chọn PHP JQuery.
Tập lệnh cơ sở dữ liệu
Tập lệnh MySQL này bao gồm câu lệnh Tạo và kết xuất dữ liệu cho & nbsp; quốc gia & nbsp; và & nbsp; states & nbsp; bảng.
CREATE TABLE IF NOT EXISTS `country` [
`id` int[11] NOT NULL,
`country_name` varchar[255] NOT NULL
]
INSERT INTO `country` [`id`, `country_name`] VALUES
[1, 'Brazil'],
[2, 'China'],
[3, 'France'],
[4, 'India'],
[5, 'USA'];
CREATE TABLE IF NOT EXISTS `states` [
`id` int[11] NOT NULL,
`name` varchar[255] NOT NULL,
`countryID` int[11] NOT NULL
]
INSERT INTO `states` [`id`, `name`, `countryID`] VALUES
[1, 'Sao Paulo', 1],
[2, 'Rio de Janeiro', 1],
[3, 'Ceara', 1],
[4, 'Santa Catarina', 1],
[5, 'Espirito Santo', 1],
[6, 'Beijing', 2],
[7, 'Hebei', 2],
[8, 'Jiangsu', 2],
[9, 'Guangdong', 2],
[10, 'Guangdong', 2],
[11, 'Ile-de-France', 3],
[12, 'Midi-Pyrenees', 3],
[13, 'Picardie', 3],
[14, 'Franche-Comte', 3],
[15, 'Alsace', 3],
[16, 'Haryana', 4],
[17, 'Andhra Pradesh', 4],
[18, 'Delhi', 4],
[19, 'Tamil Nadu', 4],
[20, 'Uttar Pradesh', 4],
[21, 'California', 5],
[22, 'Iowa', 5],
[23, 'New York4', 5],
[24, 'New Jersey', 5],
[25, 'Massachusetts', 5];
HTML Dropdown phụ thuộc nhiều lựa chọn
Trong mã HTML sau đây, tôi đã hiển thị & nbsp; thả xuống quốc gia và tiểu bang. Thả xuống của quốc gia ban đầu được tải với & NBSP; Danh sách các quốc gia được tìm nạp từ cơ sở dữ liệu trong khi thả xuống tiểu bang không có tùy chọn.
Khi chọn các tùy chọn từ các quốc gia thả xuống, chức năng getState [] & nbsp; jQuery Ajax sẽ được gọi. Yêu cầu AJAX này sẽ dẫn đến danh sách & nbsp; các tùy chọn trạng thái được tải động cho thả xuống trạng thái.
Country:
Select Country
Select State
Chủ Đề