You don't have javascript enabled! Please download Google Chrome!
  1. Trang chủ
  2. Frontend
  3. HTML
  4. Gom nhiều dữ liệu tạo Form Dropdown List thành một nhóm bằng thẻ Option

Gom nhiều dữ liệu tạo Form Dropdown List thành một nhóm bằng thẻ Option

Thẻ Select thường đi cặp với thẻ Option. Không thể thiếu một trong hai thẻ được.

Xem thêm bài viết

Ở bài trước chúng ta đã cùng học về một thẻ sẽ được sử dụng để tạo Form Selected Box. Hôm nay chúng ta sẽ học thêm một thẻ nữa để hoàn thành luôn bộ đôi tạo ra Form SelectedBox.

Bạn còn nhớ về thẻ Option ở bài học trước không? Thẻ Option và thẻ Select trong bài học này là một bộ đôi gắn liền với nhau. Bạn không thể tách chúng ra trong quá trình tạo Form. Thẻ Select sẽ giúp bạn khá nhiều trong quá trình tạo Form. Nhưng bạn vẫn cần lưu ý về cách thức sử dụng thẻ Select.

Thẻ Select được sử dụng như thế nào?

Lẽ dĩ nhiên là bạn không thể để thẻ Option trần trụi chui vào thẻ Form được. Lý do đơn giản cho việc này là vì Option sẽ không phát huy được tác dụng của nó. Option chỉ là nơi chứa các mục để người dùng lựa chọn mà thôi. Chứ không phải là chúng có thể có chức năng thần thánh tự nhiên hiện lên cho người dùng xem được. Chính vì thế mà Option mới cần đến thẻ Select. Select sẽ giúp cho Option trở về đúng chức năng. Chức năng của Select là giúp định danh cho cho control. Giống như những Control khác trong Form.

Cú pháp thẻ Select

<select name= “…”>

            <option value= “…”>Tên muốn hiển thị</option>

            <option value= “…”>Tên muốn hiển thị</option>

            <option value= “…”>Tên muốn hiển thị</option>

            …

</select>

 

Thuộc tính Name trong Select sẽ giúp bạn xác định những mục mà thẻ Option bạn vừa tạo ra cùng chủ đề.

Ví dụ

 

<!doctype html>
<html>
    <head>
        <title>Trang web giới thiệu ẩm thực sáng tạo</title>
        <meta charset="utf-8"/>
        <meta name="keywords" content="Thức ăn, nước uống, địa điểm hay"/>
        <meta name="description" content="Trang web giới thiệu ẩm thực Sài Gòn"/>
        
    </head>
    <body>
        <h1>Chào mừng bạn đến với trang liên hệ</h1>
        <p>Hãy liên hệ với chúng tôi để có thêm nhiều thông tin thú vị về ẩm thực Việt Nam. Chúng tôi sẵn sàng tư vấn miễn phí cho bạn những quán ăn  ngon-bổ-rẻ. Hãy điền vào form bên trái nếu bạn muốn tư vấn và điền vào form bên phải để liên hệ với chúng tôi thực hiện những yêu cầu khác.</p>
        <h2>Danh sách các món ăn mà bạn muốn được tư vấn</h2>
        <select name="monan">
            <option value="bunbo">Bún bò Huế</option>
            <option value="bunmam">Bún mắm</option>
            <option value="banhcanh">Bánh canh</option>
            <option value="banhbotloc">Bánh bột lọc</option>
            <option value="sup">Súp</option>
            <option value="lau">Lẩu</option>
            <option value="chao">Cháo</option>
            <option value="duahapca">Dứa hấp cá</option>
            <option value="banh-mi">Bánh mì</option>
            <option value="sui-cao-hap-kieu-hong-kong">Sủi cảo hấp kiểu Hong Kong</option>
        </select>
        <br/>
        <h2>Ẩm thực mà bạn muốn được tư vấn</h2>
        <select name="quocgia">
            <option value="france">Pháp</option>
            <option value="denmark">Đan Mạch</option>
            <option value="switzerland">Thuỵ Sĩ</option>
            <option value="spain">Tây Ban Nha</option>
            <option value="india">Ấn Độ</option>
            <option value="arab">Ả Rập</option>
            <option value="vietnam" selected>Việt Nam</option>
            <option value="thailand">Thái Lan</option>
            <option value="singapore">Singapore</option>
            <option value="malaysia">Malaysia</option>
            <option value="korea">Hàn Quốc</option>
            <option value="japan">Nhật Bản</option>
            <option value="United States">Mỹ</option>
        </select>
    </body>

Kết quả ví dụ

Bạn có thể đánh dấu ô mà bạn muốn hiển thị đầu tiên để người dùng có thể nhìn thấy dòng lựa chọn đó đầu tiên. Chúng ta sẽ ghi chữ Selected tương đương với Checked ở những thẻ như Radiobox lên thẻ Option mà bạn muốn.

Chúng ta đã xem qua khá nhiều ví dụ. Bạn đã biết cách để áp dụng thẻ Select vào cách tạo Form Selected Box trong HTML. Chúng ta sẽ làm bài tập để cho quen với cách mà thẻ Select và thẻ Option cùng làm việc chung với nhau. Chúc bạn học vui!

Bài tập

Hãy tạo ra danh sách chứa các đội bóng đang thi đấu hiện tại ở giải Ngoại hạng Anh, Bundesliga, Serie A, La Liga, Ligue 1. Trong số các đội bóng mà bạn đã ghi chọn 5 đội bóng bạn yêu thích nhất tại 5 giải đấu đó gắn Selected.




Đặt câu hỏi cho bài viết này ?