Danh sách thả xuống động Hướng dẫn PHP MySQLi
Trong nhiều trường hợp, có thể mã hóa cứng một tập hợp các tùy chọn danh sách thả xuống ngay trong phần HTML của trang như đã thực hiện trong ví dụ trước. Tuy nhiên, khi nội dung của một danh sách thường xuyên thay đổi, cách tiếp cận như vậy sẽ yêu cầu rất nhiều lần cập nhật trang không cần thiết. Giống như bạn có thể sử dụng PHP để truy xuất dữ liệu được phủ trên bản đồ, bạn cũng có thể sử dụng nó để tự động điền vào danh sách thả xuống Show Để minh họa một cách tiếp cận vấn đề này, chúng ta hãy xem một phiên bản sửa đổi đôi chút của trang Jen và Barry ở phần trước của bài học Nó trông và hoạt động giống nhau đối với người dùng cuối. Tuy nhiên, phiên bản này lấy tên của các thành phố từ MySQL. Lưu ý rằng thay cho phần tử select đã được mã hóa cứng trước đây, giờ đây chỉ có một div trống (với id được gán). Sự khác biệt khác trong phiên bản này có thể được tìm thấy ở phần đầu của hàm initMap(). Ở đó trước khi khởi tạo bản đồ là một lệnh gọi jQuery ajax(). Mã này đọc đầu ra của tập lệnh có tên get_city_list. php và chèn văn bản đó vào div giữ chỗ trống. Đây là mã nguồn của get_city_list. php https. //phpdb. một bộ. psu. edu/phpjed124/get_city_list. php City:'; echo ''; echo ''; } mysqli_close($link); ?> Logic đằng sau tập lệnh này khá đơn giản. Đầu tiên, nó xuất các thẻ bắt đầu cho nhãn của danh sách và chọn các thành phần, theo sau là tùy chọn "tất cả" (để hiển thị tất cả các thành phố). Sau đó, nó lặp qua các bản ghi được trả về bởi một truy vấn chọn một danh sách các thành phố duy nhất. Mệnh đề GROUP BY của truy vấn không thực sự cần thiết đối với bảng này, nhưng tôi đã đưa nó vào vì mệnh đề như vậy thường hữu ích để loại bỏ trùng lặp. Ví dụ: hãy tưởng tượng bạn đang phát triển một ứng dụng bất động sản cho phép người dùng chọn một khu học chánh từ danh sách và xem tất cả các bất động sản có sẵn trong khu học chánh đó. Bạn muốn mỗi học khu chỉ xuất hiện trong danh sách thả xuống một lần, nhưng bảng chứa danh sách tài sản có thể chứa nhiều lần xuất hiện của mỗi học khu. NHÓM THEO trên trường khu học chánh sẽ tạo ra một danh sách không trùng lặp (và được sắp xếp theo thứ tự bảng chữ cái) Điều này kết thúc nội dung trên cơ sở dữ liệu quan hệ và việc sử dụng chúng trong ngữ cảnh lập bản đồ web. Trên trang tiếp theo, bạn sẽ tìm thấy một kịch bản dự án mà bạn có thể hoàn thành như một cách áp dụng những gì bạn đã học ở đây vào thực tế và/hoặc để kiếm thêm tín chỉ Hướng dẫn này trình bày cách sử dụng Data Bridge 2. 0 để triển khai trình đơn thả xuống động, trong đó một lựa chọn trong một danh sách chọn sẽ điền vào một danh sách chọn khác Cầu dữ liệu 2. 0 sử dụng Ajax (JavaScript và XML không đồng bộ) để tự động sửa đổi các phần của trang web mà không cần làm mới. Điều này cho phép lựa chọn một mục trong một danh sách để cập nhật hoàn toàn danh sách thứ hai. Cầu dữ liệu này 2. 0 cực kỳ mạnh mẽ và có thể được sử dụng theo nhiều cách, bao gồm cả việc thay thế chức năng của tiện ích mở rộng Dynamic Dropdowns, như được hiển thị trong hướng dẫn này
Bước 1. Tạo một trang web Dreamweaver PHPTrang web Dreamweaver của bạn phải bao gồm một máy chủ thử nghiệm cục bộ được thiết lập để sử dụng PHP làm mô hình máy chủ. Sau khi trang web được tạo, hãy làm theo các bước sau
Bước 2. Thiết lập cơ sở dữ liệu MySQLSử dụng phpMyAdmin hoặc một công cụ quản lý MySQL tương tự, hãy làm theo các bước sau
Trong phần này, bạn sẽ chèn HTML cần thiết cho trang chính Bước 1. Thêm biểu mẫu và các phần tử biểu mẫuChúng ta sẽ bắt đầu bằng cách thêm một biểu mẫu cơ bản vào trang và sau đó chèn một biểu mẫu có các thuộc tính bắt buộc
Trong phần này, chúng ta sẽ làm việc với các thành phần HTML tĩnh của trang con. Trang con sẽ chứa danh sách lựa chọn thứ hai và cuối cùng được tích hợp vào trang chính Bước 1. Thêm phần tử biểu mẫuTrang phụ này cuối cùng sẽ được tích hợp vào trang chính, vì vậy ở đây chúng tôi sẽ thêm HTML cho danh sách lựa chọn thứ hai. Bạn sẽ nhận thấy rằng chúng tôi không cần thêm thẻ biểu mẫu mới, vì trang con không độc lập và các phần tử nội dung sẽ được chèn vào biểu mẫu trong trang chính.
Thời gian để có được năng động trên trang con. Ở đây, như với trang chính, chúng ta sẽ thiết lập kết nối cơ sở dữ liệu, tạo tập bản ghi và sau đó liên kết nó với danh sách chọn Bước 1. Thêm kết nối cơ sở dữ liệuCũng như trang chính, chúng ta sẽ cần thiết lập kết nối với cơ sở dữ liệu. Vì nó đã được tạo nên tất cả những gì chúng ta cần làm là thêm nó vào trang
Bước 2. Xác định tập bản ghi trang conMột lần nữa, chúng tôi sẽ tự động điền vào danh sách lựa chọn - nhưng đối với trang con, chúng tôi sẽ cần lọc dữ liệu của mình theo một biến cụ thể, giá trị của danh sách lựa chọn của thị trấn được đăng lên trang
Bước 3. Liên kết dữ liệu động với danh sách chọn trang conVới tập bản ghi rsTeams của chúng tôi được xác định, giờ đây chúng tôi có thể liên kết dữ liệu động với danh sách chọn trên trang con
Dreamweaver sẽ chèn thẻ script để tải Ajax. js trong phần của trang cũng như thêm thuộc tính onChange vào thẻ đã chọn. Khi được thực thi, mã này sẽ không đồng bộ—không làm mới trang—tải danh sách lựa chọn con vào trang chính, dựa trên tùy chọn được chọn từ danh sách lựa chọn chính. Mã hóa hiện đã hoàn tất và chúng tôi đã sẵn sàng để kiểm tra trang. Bước 3. Kiểm tra công việc của bạn Được rồi, bạn đã làm được. Bây giờ, hãy kiểm tra công việc của bạn. từ chính. php, nhấp vào biểu tượng Xem trước thời gian thực ở phía dưới bên phải của cửa sổ tài liệu và chọn trình duyệt ưa thích của bạn. Khi trang hiển thị, chọn một thị trấn từ danh sách lựa chọn đầu tiên. Sau khi danh sách lựa chọn thứ hai xuất hiện, hãy chọn một nhóm. Lưu ý rằng tùy chọn tĩnh "Sau đó chọn một nhóm" không còn hiển thị sau khi một thị trấn đã được chọn và tập bản ghi rsTeam không trống. Xin chúc mừng. Bạn đã sử dụng thành công Data Bridge 2. 0 để tạo danh sách thả xuống động. Phương pháp chúng tôi đã sử dụng để thực hiện điều này cực kỳ hiệu quả và có thể được sử dụng để cung cấp năng lượng cho tất cả các loại chức năng của Ajax |