ใช้ลิงก์ href ภายในแท็ก <option>

ฉันมีรหัส HTML ต่อไปนี้:

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

ฉันจะทำให้ค่าบ้านผู้ติดต่อและแผนผังไซต์เป็นลิงก์ได้อย่างไร ฉันใช้รหัสต่อไปนี้และตามที่คาดไว้มันไม่ทำงาน:

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

อัพเดท (พ.ย. 2558):ในวันนี้และอายุถ้าคุณต้องการมีเมนูดร็อปมีวิธีที่ดีกว่าในการนำไปใช้ คำตอบนี้เป็นคำตอบโดยตรงกับคำถามโดยตรง แต่ฉันไม่สนับสนุนวิธีนี้สำหรับเว็บไซต์สาธารณะที่หันหน้าเข้าหา

อัปเดต (พฤษภาคม 2020): มีคนถามความคิดเห็นว่าทำไมฉันถึงไม่สนับสนุนโซลูชันนี้ ฉันเดาว่ามันเป็นคำถามของความหมาย ฉันต้องการให้ผู้ใช้ของฉันนำทางโดยใช้<a>และเก็บไว้<select>เพื่อเลือกรูปแบบเนื่องจากองค์ประกอบ HTML มีการประชุมทางความหมายและพวกเขามีจุดประสงค์anchorsพาคุณไปที่<select>เพื่อเลือกสิ่งต่าง ๆ จากรายการ

พิจารณาถ้าคุณกำลังดูหน้าเว็บที่มีเบราว์เซอร์ที่ไม่ใช่แบบดั้งเดิม (ไม่ใช่กราฟิกเบราว์เซอร์หรือหน้าจออ่านหรือหน้าเว็บที่มีการเข้าถึงโปรแกรมหรือ JavaScript ถูกปิดใช้งาน) สิ่งนั้นคือ "ความหมาย" หรือ "ความตั้งใจ" นี้<select>คุณมี ใช้สำหรับนำทาง? มันบอกว่า "กรุณาเลือกชื่อหน้า" และไม่มากไม่มีอะไรแน่นอนเกี่ยวกับการนำทาง การตอบสนองที่ง่ายต่อการนี้คือwell i know that my users will be using IE or whatever so shrugแต่ชนิดนี้พลาดจุดสำคัญความหมาย

ในขณะที่องค์ประกอบ UI แบบเลื่อนลงที่ทำจากองค์ประกอบเลย์เอาต์ที่เหมาะสม (และ js บางตัว) ที่มีแองเคอร์ทั่วไปบางตัวยังคงรักษาความตั้งใจไว้แม้ว่าองค์ประกอบเลย์เอาต์จะหายไป "นี่เป็นลิงก์จำนวนมากเลือกหนึ่งรายการ .

นี่คือบทความเกี่ยวกับทางที่ผิดและการละเมิดของ<select>

คุณไม่สามารถใช้แท็ก href พร้อมกับแท็กตัวเลือก คุณจะต้องมีจาวาสคริปต์เพื่อทำเช่นนั้น

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

ใช้เมนูดร็อปดาวน์จริงแทน: รายการ ( ul, li) และลิงก์ อย่าใช้องค์ประกอบของฟอร์มในทางที่ผิด

ผู้อ่านที่มีโปรแกรมอ่านหน้าจอจะสแกนรายการลิงก์ที่สร้างขึ้นโดยอัตโนมัติซึ่งจะทำให้พลาดข้อมูลสำคัญเหล่านี้ ระบบนำทางด้วยแป้นพิมพ์จำนวนมาก (เช่น JAWS, Opera) มีแป้นพิมพ์ลัดที่แตกต่างกันสำหรับลิงก์และองค์ประกอบของฟอร์ม

หากคุณยังไม่สามารถทิ้งความคิดที่ว่าselectอย่าใช้onchangeตัวจัดการอย่างน้อย นี่เป็นความเจ็บปวดอย่างแท้จริงสำหรับผู้ใช้แป้นพิมพ์ทำให้รายการที่สามของคุณไม่สามารถเข้าถึงได้

โซลูชันที่ยอมรับนั้นดูดี แต่มีอยู่หนึ่งกรณีที่ไม่สามารถจัดการได้:

เหตุการณ์ "onchange" จะไม่ถูกเรียกใช้เมื่อเลือกตัวเลือกเดิมอีกครั้ง ดังนั้นฉันจึงได้รับการปรับปรุงต่อไปนี้:

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);
});

(ฉันไม่มีชื่อเสียงเพียงพอที่จะแสดงความคิดเห็นกับคำตอบของ toscho)

ฉันไม่มีประสบการณ์กับโปรแกรมอ่านหน้าจอและฉันแน่ใจว่าคะแนนของคุณถูกต้อง

อย่างไรก็ตามเท่าที่ใช้แป้นพิมพ์เพื่อจัดการเลือกมันเป็นเรื่องเล็กน้อยเพื่อเลือกตัวเลือกใด ๆ โดยใช้แป้นพิมพ์:

TAB เพื่อการควบคุม

SPACE เพื่อเปิดรายการที่เลือก

ลูกศรขึ้นหรือลงเพื่อเลื่อนไปยังรายการที่ต้องการ

ENTER เพื่อเลือกรายการที่ต้องการ

เฉพาะใน ENTER จะทำการไฟของเหตุการณ์ onchange หรือ (JQuery .change ())

แม้ว่าโดยส่วนตัวแล้วฉันจะไม่ใช้การควบคุมแบบฟอร์มสำหรับเมนูง่าย ๆ แต่มีเว็บแอปพลิเคชั่นมากมายที่ใช้การควบคุมแบบฟอร์มเพื่อเปลี่ยนการนำเสนอหน้า (เช่นเรียงลำดับ) ซึ่ง AJAX สามารถนำไปใช้เพื่อโหลดเนื้อหาใหม่ลงใน หน้าหรือในการใช้งานเก่าโดยการเรียกโหลดหน้าใหม่ซึ่งเป็นลิงค์ของหน้า

IMHO เหล่านี้คือการใช้งานที่ถูกต้องของการควบคุมแบบฟอร์ม

<select>แท็กสร้างรายการแบบเลื่อนลง คุณไม่สามารถใส่ลิงค์ html ในแบบเลื่อนลง

อย่างไรก็ตามมีไลบรารี JavaScript ที่มีฟังก์ชันการทำงานที่คล้ายกัน นี่คือตัวอย่างหนึ่ง: 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>

ลองใช้รหัสนี้

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