Chọn tùy chọn javascript

Sử dụng thẻ select để lựa chọn, ở gần đó nó giống với nút radio, nhưng điểm khác biệt là chọn menu thả xuống có kiểu dáng định dạng (xổ xuống)

mẫu mã

   Chọn giá nhà bạn muốn mua
   Từ 300 triệu đến 400 triệu
   Từ 401 triệu đến 600 triệu
   Từ 601 triệu đến 800 triệu
   Từ 801 triệu đến 1.2 tỷ đồng

Kết quả

lục mục

• 1. Thuộc tính name
• 2. Thuộc tính bị vô hiệu hóa
• 3. Thuộc tính kích thước
• 4. Thuộc tính nhiều
• 5. Nhóm các lựa chọn liên quan đến optgroup

1. Thuộc tính name

Đây là thành phần không thể thiếu của các thẻ nằm trong biểu mẫu, trong đó phải kể đến thẻ đầu vào, vùng văn bản. Chọn thẻ cũng vậy, thuộc tính tên cho phép JavaScript và các ngôn ngữ lập trình web như PHP lấy dữ liệu mà người dùng nhập sau khi họ nhấn nút gửi. mẫu mã

   Chọn giá nhà bạn muốn mua
   Từ 300 triệu đến 400 triệu
   Từ 401 triệu đến 600 triệu
   Từ 601 triệu đến 800 triệu
   Từ 801 triệu đến 1.2 tỷ đồng

2. Thuộc tính bị vô hiệu hóa

Dùng để làm cả danh sách thả xuống hoặc một lựa chọn nào không khả dụng, ví dụ

mẫu mã

   Chọn giá nhà bạn muốn mua
   Từ 300 triệu đến 400 triệu
   Từ 401 triệu đến 600 triệu
   Từ 601 triệu đến 800 triệu
   Từ 801 triệu đến 1.2 tỷ đồng

Giờ giả dụ các nhà có giá từ 300 – 400 triệu đã hết, bạn sẽ ngăn không cho người dùng chọn giá đó, các nhà có giá khác vẫn chọn được

mẫu mã

   Chọn giá nhà bạn muốn mua
   Từ 300 triệu đến 400 triệu
   Từ 401 triệu đến 600 triệu
   Từ 601 triệu đến 800 triệu
   Từ 801 triệu đến 1.2 tỷ đồng

3. Thuộc tính kích thước

Với kích thước, bạn sẽ quyết định xem có bao nhiêu lựa chọn được hiển thị bên ngoài. Như ở trên có 4 giá nhà, và hiển thị ra bên ngoài ngay cái nhìn đầu tiên chỉ là 1 (khi đã nhấn vào rồi thì sẽ hiện hết). Giờ nếu bạn có 9 lựa chọn và muốn hiển thị ngoài 4 lựa chọn. Ví dụ

mẫu mã

   Chọn giá nhà bạn muốn mua
   Từ 300 triệu đến 400 triệu
   Từ 401 triệu đến 600 triệu
   Từ 601 triệu đến 800 triệu
   Từ 801 triệu đến 1.2 tỷ
   Từ 1.2 tỷ đến 1.5 tỷ
   Từ 1.5 tỷ triệu đến 2 tỷ
   Từ 2 tỷ triệu đến 3 tỷ
   Từ 3 tỷ triệu đến 5 tỷ

There are a note note

• Khi bạn sử dụng size lớn hơn 1, theo mặc định có ít nhất 4 lựa chọn sẽ hiện ra, tức là nếu bạn chọn size lớn hơn 2, 3 hoặc 4 thì đều ra 4 lựa chọn hết. Từ 4 trở lên thì mới chính xác hoàn toàn, giả dụ cho 5 thì có 5 lựa chọn, cho 7 thì có 7 lựa chọn
• Nếu kích thước lớn hơn 1 nhưng nhỏ hơn số khả năng lựa chọn thì sẽ xuất hiện thanh cuộn dọc để bạn kéo lên kéo xuống

4. Thuộc tính nhiều

Với nhiều lựa chọn, bạn sẽ cho phép người dùng có nhiều lựa chọn cùng lúc thay vì chỉ có một lựa chọn như mặc định

Giữ phím Ctrl và đánh dấu vào nhiều cái, với giả định là bạn có thể mua nhà từ giá thấp nhất đến gần cao nhất 🙂

mẫu mã

   Chọn giá nhà bạn muốn mua
   Từ 300 triệu đến 400 triệu
   Từ 401 triệu đến 600 triệu
   Từ 601 triệu đến 800 triệu
   Từ 801 triệu đến 1.2 tỷ đồng

Clear clear many doing for select same with checkbox than. Tuy nhiên, hộp kiểm cũng dễ thấy thì chuyên nghiệp hơn trong việc thiết kế ứng dụng đa lựa chọn

5. Nhóm các lựa chọn liên quan đến optgroup

Nếu bạn có một danh sách các lựa chọn khá dài, bạn có thể muốn nhóm các lựa chọn lại với nhau để người dùng dễ dàng quan sát và thao tác. Khi đó bạn nên sử dụng thẻ optgroup. mẫu mã

499 triệu – 60m2
350 triệu – 40m2

250 triệu – 25m2



700 triệu – 85m2
350 triệu – 100m2
1.2 tỷ – 150m2

Kết quả

Bạn có thể thấy những ngôi nhà có giá dưới 500 triệu được nhóm lại dưới nhãn được tô đậm. Thẻ optgroup có 2 thuộc tính, nhãn ngoài thuộc tính bạn đã thấy trong mã ở trên, nó còn thuộc tính bị vô hiệu hóa dùng để vô hiệu hóa một nhóm lựa chọn, giả dụ, tất cả các nhà có giá dưới 500 triệu đã được bán hết