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


112
54
Hoàng Mạnh Khôi
10 năm trước

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ệ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>
Hữu ích 112 Yêu thích 54 Chia sẻ Viết bình luận 2
Không hữu ích

Bạn chỉ cần theo dõi liên kết trợ giúp theo dõi stackoverflow.com/questions/12287672/ Hy vọng có thể giúp đỡ

Hữu ích 0 · Không hữu ích · Trả lời 0

Có lẽ giải pháp không phải javascript này sẽ giúp ích: stackoverflow.com/questions/9953482/ trên

Hữu ích 0 · Không hữu ích · Trả lời 0

7 Trả lời


230
Trịnh Thục Anh
10 năm trước
<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 đối mặt công khai.

Hữu ích 230 Trả lời hay nhất Chia sẻ Viết bình luận 5
Không hữu ích

rất tuyệt! bạn cũng có thể sử dụng mã này <option value="#anchor_on_my_site">...</option>để liên kết đến một neo!

Hữu ích 16 · Không hữu ích · Trả lời 0

Chỉ cần thay đổi các giá trị thành home.php, contact.php và sitemap.php.

Hữu ích 6 · Không hữu ích · Trả lời 0

Tôi biết điều này rất tầm thường nhưng nên là "onchange" chứ không phải "ONCHANGE"

Hữu ích 3 · Không hữu ích · Trả lời 0

Bạn có thể rút ngắn nó xuốnglocation = this.value;

Hữu ích 3 · Không hữu ích · Trả lời 0

chỉ để cho bạn biết liên kết của bạn không hoạt động để tìm cách thực hiện một

Hữu ích 1 · Không hữu ích · Trả lời 0

15
Vũ Quỳnh Liên
10 năm trước

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>
Hữu ích 15 Chia sẻ Viết bình luận 0
Không hữu ích

12
Huỳnh Tuấn Hùng
10 năm trước

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ờ sử dụng sai các yếu tố hình thức như liên kết.

Những 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.

Hữu ích 12 Chia sẻ Viết bình luận 3
Không hữu ích

Tất nhiên là chính xác, ứng dụng của makmour là sự lạm dụng lớn các trường mẫu.

Hữu ích 2 · Không hữu ích · Trả lời 0

@SkippyleGrandGourou Giải pháp tốt hơn là chỉ sử dụng một menu với các liên kết thực tế trong đó.

Hữu ích 1 · Không hữu ích · Trả lời 0

Phải, nhưng còn thiết bị di động thì sao? Nếu câu trả lời được chấp nhận được kết hợp với menu thả xuống thực tế với công tắc "display: hidden" trong truy vấn phương tiện, bạn có còn lo lắng không? Hay bạn có một giải pháp tốt hơn?

Hữu ích 0 · Không hữu ích · Trả lời 0

7
Lê Uyên Vi
4 năm trướ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);
});
Hữu ích 7 Chia sẻ Viết bình luận 1
Không hữu ích

Hoặc chỉ cần thêm một tùy chọn trống vào đầu:<option value="">&nbsp;</option>

Hữu ích 2 · Không hữu ích · Trả lời 0

5
Đỗ Ðức Thành
6 năm trước

(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.

Hữu ích 5 Chia sẻ Viết bình luận 0
Không hữu ích

3
Lý Duy Tuyền
10 năm trước

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

Hữu ích 3 Chia sẻ Viết bình luận 0
Không hữu ích

2
Dương Hiếu Nghĩa
3 năm trước
    <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ữu ích 2 Chia sẻ Viết bình luận 1
Không hữu ích

Mặc dù mã này có thể trả lời câu hỏi, việc cung cấp ngữ cảnh bổ sung liên quan đến cách thức và / hoặc lý do giải quyết vấn đề sẽ cải thiện giá trị lâu dài của câu trả lời.

Hữu ích 0 · Không hữu ích · Trả lời 0

Trả lời của bạn

Xem trước nội dung