Trong hướng dẫn này, chúng ta sẽ tìm hiểu về menu thả xuống Nhiều lựa chọn. Danh sách Nhiều lựa chọn này rất quan trọng trong phát triển web. Như chúng ta biết rằng hộp thả xuống là thành phần biểu mẫu mạnh mẽ nhất trong công nghệ web nơi chúng ta có thể chọn một tùy chọn trong một số tùy chọn
Trong hộp thả xuống, chúng tôi có thể lấy dữ liệu từ bảng mysql để hiển thị tất cả các tùy chọn và người dùng có thể chọn một tùy chọn trong đó. Nhưng hộp thả xuống nhiều lựa chọn cho phép các tính năng chọn nhiều tùy chọn trong tất cả tùy chọn, người dùng cũng có thể chọn tất cả tùy chọn thông qua menu thả xuống nhiều lựa chọn
Ở đây chúng ta sẽ tìm hiểu cách triển khai menu thả xuống Nhiều lựa chọn và cách lấy tất cả dữ liệu đã chọn của biểu mẫu và lưu nó vào cơ sở dữ liệu
Menu thả xuống Nhiều lựa chọn giống như hộp thả xuống Đơn giản. Mã HTML của cả hai đều giống nhau ngoại trừ menu thả xuống Nhiều lựa chọn cần viết “multiple="multiple"” trong tùy chọn chọn
Đây là mã triển khai của hộp thả xuống đơn giản
Bây giờ chúng ta sẽ chuyển sang triển khai menu thả xuống Nhiều lựa chọn
Trong danh sách thả xuống Nhiều lựa chọn, chúng tôi đang nhận giá trị ở dạng danh sách, giá trị của danh sách thả xuống nhiều lựa chọn này có thể được lấy bằng cách
if[isset[$_POST['state_id']]]
$state_id=implode[',',$_POST['state_id']];Ở đây chúng ta chỉ có thể ẩn tất cả giá trị của danh sách đó và lưu nó vào biến có thể được lưu vào bảng của chúng ta
Đây là nút để chọn hoặc bỏ chọn tất cả giá trị của hộp thả xuống nhiều lựa chọn
Mã triển khai jquery được cung cấp bên dưới
Ghi chú. Chúng ta nên người dùng sử dụng. chức năng prop[] trong phiên bản jquery 1. 9 trở lên. Thổi phiên bản này, chúng ta nên sử dụng. hàm attr[]
Mã CSS
Đó là tất cả về danh sách thả xuống Nhiều lựa chọn. Nếu bạn có bất kỳ câu hỏi, gợi ý nào về nó, vui lòng viết trong phần bình luận
Hướng dẫn này sẽ chỉ cho bạn cách thêm hộp chọn và hộp đa lựa chọn vào một biểu mẫu, cách truy xuất dữ liệu đầu vào từ chúng, cách xác thực dữ liệu và cách thực hiện các hành động khác nhau tùy thuộc vào đầu vào
Chọn hộp
Hãy xem xét một đầu vào mới. hộp “chọn”, còn được gọi là hộp “thả xuống” hoặc “kéo xuống”. Một hộp chọn chứa một hoặc nhiều “tùy chọn”. Mỗi tùy chọn có một “giá trị”, giống như các đầu vào khác và cũng là một chuỗi văn bản giữa các thẻ tùy chọn. Điều này có nghĩa là khi người dùng chọn “Male”, giá trị “formGender” khi PHP truy cập sẽ là “M”
What is your Gender?
Select...
Male
Female
Giá trị đã chọn từ đầu vào này có thể được đọc với mảng $_POST tiêu chuẩn giống như đầu vào văn bản và được xác thực để đảm bảo người dùng đã chọn Nam hoặc Nữ
Luôn luôn là một ý tưởng hay khi có tùy chọn “trống” làm tùy chọn đầu tiên trong hộp chọn của bạn. Nó buộc người dùng phải lựa chọn có ý thức từ hộp và tránh tình huống người dùng có thể bỏ qua hộp mà không có ý định. Tất nhiên, điều này yêu cầu xác nhận
________số 8
[ Để biết tập lệnh xác thực biểu mẫu chung, dễ sử dụng, hãy xem Tập lệnh xác thực biểu mẫu PHP ]
đa lựa chọn
Giả sử bạn muốn hiển thị hộp chọn cho phép người dùng chọn nhiều tùy chọn
Đây là cách tạo một đầu vào như vậy trong HTML
Select the countries that you have visited:
United States
United Kingdom
France
Mexico
Russia
Japan
Vui lòng lưu ý sự tương đồng với nhóm hộp kiểm. Trước tiên, hãy đặt multiple=“multiple” làm thuộc tính của hộp chọn. Thứ hai, đặt
Mã PHP để xử lý trường này rất giống với mã hộp kiểm.
Như trước đây, hãy sử dụng “isset” để đảm bảo rằng một số giá trị đã được chọn
Sử dụng công tắc
Bây giờ, hãy thay đổi hộp chọn nhiều lần thành hộp chọn đơn tiêu chuẩn. Bây giờ chúng tôi muốn thực hiện các hành động khác nhau dựa trên lựa chọn của người dùng. Bạn có thể viết một loạt các câu lệnh "nếu", nhưng điều đó có thể trở nên lộn xộn. Hãy xem xét hai cách. các lệnh động và câu lệnh switch
Hai cách tiếp cận này có ưu và nhược điểm của chúng. Phương thức chuyển đổi về cơ bản là một phương pháp ngắn gọn để viết một loạt các câu lệnh "nếu". Mỗi trường hợp khớp với biến được chuyển qua công tắc và thực hiện tất cả các hành động sau trường hợp đó cho đến khi có câu lệnh ngắt. Trong trường hợp này, mỗi trường hợp đang chuyển hướng đến trang tương ứng đến quốc gia đã chọn. Nếu không tìm thấy quốc gia đã chọn trong một trong các trường hợp, thì trường hợp “mặc định” được giả định và “Lỗi. " được hiển thị
Phương pháp thứ hai chỉ là chuyển giá trị đã chọn cho chức năng tiêu đề để chuyển hướng đến đúng trang
Phương pháp đầu tiên yêu cầu viết nhiều mã hơn, nhưng an toàn hơn vì nó đảm bảo biểu mẫu chỉ chuyển hướng đến 6 trường hợp được lập trình sẵn, nếu không sẽ hiển thị thông báo lỗi và kết thúc thực hiện
Phương pháp thứ hai ngắn gọn hơn nhiều, nhưng kém an toàn hơn vì người dùng ác ý có thể sử dụng biểu mẫu và gửi bất kỳ giá trị nào anh ta muốn. Nếu sử dụng phương pháp 2, bạn nên xác thực quốc gia đã chọn trước để đảm bảo rằng quốc gia đó sẽ không dẫn đến chuyển hướng đến một trang độc hại