sử dụng các liên kết trong thẻ <tùy chọn>

Tôi có mã HTML sau:

<select name="forma">
    <option value="Home">Home</option>
    <option value="Contact">Contact</option>
    <option value="Sitemap">Sitemap</option>
</select>

Làm cách nào tôi có thể tạo các giá trị Trang chủ , Liên hệ và Sơ đồ trang web dưới dạng liên kết? Tôi đã sử dụng mã sau đây và như tôi dự đoán nó không hoạt động:

<select name="forma">
    <option value="Home"><a href="home.php">Home</a></option>
    <option value="Contact"><a href="contact.php">Contact</a></option>
    <option value="Sitemap"><a href="sitemap.php">Sitemap</a></option>
</select>

<select name="forma" onchange="location = this.value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>

CẬP NHẬT (Tháng 11 năm 2015): Trong thời đại ngày nay nếu bạn muốn có một menu thả, có rất nhiều cách tốt hơn để thực hiện. Câu trả lời này là câu trả lời trực tiếp cho câu hỏi trực tiếp, nhưng tôi không ủng hộ phương pháp này cho các trang web công khai.

CẬP NHẬT (tháng 5 năm 2020): Có người hỏi trong các ý kiến ​​tại sao tôi không ủng hộ giải pháp này. Tôi đoán đó là một câu hỏi về ngữ nghĩa. Tôi muốn người dùng của mình điều hướng bằng cách sử dụng <a>và giữ lại <select>để thực hiện các lựa chọn biểu mẫu vì các phần tử HTML có cuộc họp ngữ nghĩa và chúng có mục đích, anchorsđưa bạn đến địa điểm, <select>để chọn mọi thứ từ danh sách.

Hãy xem xét, nếu bạn đang xem một trang có trình duyệt phi truyền thống (trình duyệt không có đồ họa hoặc trình đọc màn hình hoặc trang được truy cập theo chương trình hoặc JavaScript bị vô hiệu hóa) thì "ý nghĩa" hoặc "ý định" của việc này <select>bạn có là gì dùng để điều hướng? Đó là nói "vui lòng chọn một tên trang" và không nhiều thứ khác, chắc chắn không có gì về điều hướng. Phản ứng dễ dàng cho điều này là well i know that my users will be using IE or whatever so shrugnhưng loại này bỏ lỡ điểm quan trọng về ngữ nghĩa.

Trong khi một phần tử UI thả xuống thú vị được làm bằng các thành phần bố cục phù hợp (và một số js) có chứa một số neo thông thường vẫn giữ nguyên ý định ngay cả khi phần tử bố cục bị mất, "đây là một loạt các liên kết, hãy chọn một liên kết và chúng tôi sẽ điều hướng đến đó" .

Đây là một bài viết về lạm dụng và lạm dụng<select> .

Bạn không thể sử dụng thẻ href với các thẻ tùy chọn. Bạn sẽ cần javascript để làm như vậy.

<select name="formal" onchange="javascript:handleSelect(this)">
<option value="home">Home</option>
<option value="contact">Contact</option>
</select>

<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+".php";
}
</script>

Sử dụng menu thả xuống thực sự thay thế: danh sách ( ul, li) và liên kết. Không bao giờ lạm dụng các yếu tố hình thức như liên kết.

Người đọc có trình đọc màn hình thường quét qua danh sách các liên kết được tạo tự động - sẽ bỏ lỡ những thông tin quan trọng này. Nhiều hệ thống điều hướng bàn phím (ví dụ JAWS, Opera) cung cấp các phím tắt khác nhau cho các liên kết và các yếu tố hình thức.

Nếu bạn vẫn không thể bỏ ý tưởng về selectviệc không sử dụng onchangetrình xử lý ít nhất. Đây là một nỗi đau thực sự cho người dùng bàn phím, nó làm cho mục thứ ba của bạn gần như không thể truy cập được.

Giải pháp được chấp nhận có vẻ tốt, nhưng có một trường hợp không thể xử lý:

Sự kiện "onchange" sẽ không được kích hoạt khi tùy chọn tương tự được chọn lại. Vì vậy, tôi đã đưa ra cải tiến sau đây:

HTML

<select id="sampleSelect" >
  <option value="Home.php">Home</option>
  <option value="Contact.php">Contact</option>
  <option value="Sitemap.php">Sitemap</option>
</select>

jQuery

$("select").click(function() {
  var open = $(this).data("isopen");
  if(open) {
    window.location.href = $(this).val()
  }
  //set isopen to opposite so next time when use clicked select box
  //it wont trigger this event
  $(this).data("isopen", !open);
});

(Tôi không có đủ danh tiếng để nhận xét về câu trả lời của toscho.)

Tôi không có kinh nghiệm với trình đọc màn hình và tôi chắc chắn rằng điểm của bạn là hợp lệ.

Tuy nhiên, đối với việc sử dụng bàn phím để thao tác chọn, việc chọn bất kỳ tùy chọn nào là không quan trọng bằng cách sử dụng bàn phím:

TAB để kiểm soát

KHÔNG GIAN để mở danh sách chọn

Mũi tên LÊN hoặc XUỐNG để cuộn đến mục danh sách mong muốn

ENTER để chọn mục mong muốn

Chỉ trên ENTER mới kích hoạt sự kiện onchange hoặc (JQuery .change ()).

Mặc dù cá nhân tôi sẽ không sử dụng điều khiển biểu mẫu cho các menu đơn giản, có nhiều ứng dụng web sử dụng điều khiển biểu mẫu để thay đổi cách trình bày của trang (ví dụ: thứ tự sắp xếp.) Chúng có thể được AJAX triển khai để tải nội dung mới vào trang, hoặc, trong các triển khai cũ hơn, bằng cách kích hoạt tải trang mới, về cơ bản là một liên kết trang.

IMHO đây là những sử dụng hợp lệ của một điều khiển biểu mẫu.

Các <select>thẻ tạo ra một danh sách thả xuống. Bạn không thể đặt các liên kết html trong danh sách thả xuống.

Tuy nhiên, có những thư viện JavaScript cung cấp chức năng tương tự. Đây là một ví dụ: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

    <select name="career" id="career" onchange="location = this.value;">
        <option value="resume" selected> All Applications </option>
        <option value="resume&j=14">Seo Expert</option>
        <option value="resume&j=21">Project Manager</option>
        <option value="resume&j=33">Php Developer</option>
    </select>

Hãy thử mã này

<select name="forma" onchange="location = this.options[this.selectedIndex].value;">
 <option value="Home.php">Home</option>
 <option value="Contact.php">Contact</option>
 <option value="Sitemap.php">Sitemap</option>
</select>