sử dụng các liên kết bên 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>
 
Nguyễn Lam Hạnh

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 đỡ

Nguyễn Ý Đoan

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

230
Trịnh Thục Anh
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.

Tạ Vân Hương

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!

Tạ Hưng Ðạo

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

Dương Hồng Nga

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”

Hoàng Hùng Dũng

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

Lý Lan Khuê

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

Vũ Quỳnh Liên
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>
Huỳnh Tuấn Hùng
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 ( ulli) 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.

Tạ Ðông Nhi

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ồ Cát Uy

@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 đó.

Võ Đăng Quang

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?

Lê Uyên Vi
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ồ Phương Thi

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

Đỗ Ðức Thành
Đỗ Ðứ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.

Lý Duy Tuyền
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

Dương Hiếu Nghĩa
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ồ Minh Khánh

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.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *