<विकल्प> टैग के अंदर href लिंक का उपयोग करना

Question

मेरे पास निम्न 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>

Comments

आप बस helpfollowing लिंक का अनुसरण कर सकते हैं stackoverflow.com/questions/12287672/… आशा है कि मदद कर सकते हैं

— बिक्रम श्रेष्ठ

शायद यह गैर जावास्क्रिप्ट समाधान मदद करेगा: stackoverflow.com/questions/9953482/…

— Melsi

Answer 1

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

अद्यतन (नवंबर 2015): इस दिन और उम्र में यदि आप एक ड्रॉप मेनू रखना चाहते हैं तो यकीनन एक को लागू करने के बेहतर तरीके हैं। यह उत्तर प्रत्यक्ष प्रश्न का सीधा उत्तर है, लेकिन मैं सार्वजनिक साइटों के लिए इस विधि की वकालत नहीं करता।

अद्यतन (मई 2020): किसी ने टिप्पणियों में पूछा कि मैं इस समाधान की वकालत क्यों नहीं करूंगा। मुझे लगता है कि यह शब्दार्थ का सवाल है। बल्कि मैं चाहता हूं कि मेरे उपयोगकर्ता फ़ॉर्म का चयन करने के लिए नेविगेट करें <a>और बनाए रखें <select>क्योंकि HTML तत्वों की शब्दार्थ बैठक होती है और उनका एक उद्देश्य होता है, anchorsआपको स्थानों पर ले जाना,<select> सूचियों से चीज़ें निकालना।

गौर करें, यदि आप एक गैर-पारंपरिक ब्राउज़र (एक गैर-ग्राफ़िकल ब्राउज़र या स्क्रीन रीडर या एक पृष्ठ को प्रोग्रामेटिक रूप से एक्सेस किया जाता है, या जावास्क्रिप्ट अक्षम है) के साथ एक पृष्ठ देख रहे हैं, तो आपके पास "अर्थ" या "इरादा" <select>क्या है नेविगेशन के लिए उपयोग किया जाता है? यह कह रहा है "कृपया एक पृष्ठ नाम चुनें" और बहुत कुछ नहीं, निश्चित रूप से नेविगेट करने के बारे में कुछ भी नहीं। इसके लिए आसान प्रतिक्रिया है, well i know that my users will be using IE or whatever so shrugलेकिन यह थोथा शब्दार्थ के महत्व को याद करता है।

जबकि कुछ नियमित एंकर युक्त उपयुक्त लेआउट तत्वों (और कुछ js) से बना एक फंकी ड्रॉप-डाउन UI तत्व अभी भी इसे बरकरार रखता है, भले ही लेआउट तत्व खो जाए, "ये लिंक का एक गुच्छा है, एक का चयन करें और हम वहां नेविगेट करेंगे" ।

यहाँ दुरुपयोग और दुरुपयोग<select> पर एक लेख है ।

Comments

बस home.php, contact.php और sitemap.php के मान बदलें।

— जेसन रोवे

बहुत ही शांत! आप इस कोड का उपयोग <option value="#anchor_on_my_site">...</option>किसी एंकर से लिंक करने के लिए भी कर सकते हैं !

— प्रूव करें

मुझे पता है कि यह बहुत तुच्छ है, लेकिन "ऑनचेंज" होना चाहिए और "ऑनचेंज" नहीं होना चाहिए

— ओलिवर डिक्सन

आप इसे छोटा कर सकते हैंlocation = this.value;

— जुआन मेंडेस

बस आपको यह जानने के लिए कि आपके लिंक को एक को लागू करने के तरीकों के लिए काम नहीं करना है

— जॉन

Answer 2

आप विकल्प टैग के साथ 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>

Answer 3

इसके बजाय एक वास्तविक ड्रॉपडाउन मेनू का उपयोग करें: एक सूची ( ul, li) और लिंक। लिंक के रूप में तत्वों का दुरुपयोग कभी न करें।

स्क्रीन पाठकों के साथ पाठक आमतौर पर लिंक की एक स्वचालित रूप से उत्पन्न सूची के माध्यम से स्कैन करते हैं - ये महत्वपूर्ण जानकारी याद करेंगे। कई कीबोर्ड नेविगेशन सिस्टम (जैसे JAWS, ओपेरा) लिंक और फॉर्म तत्वों के लिए अलग-अलग कीबोर्ड शॉर्टकट प्रदान करते हैं।

यदि आप अभी भी कम से कम हैंडलर का selectउपयोग न करें का विचार नहीं छोड़ सकते हैं onchange। यह कीबोर्ड उपयोगकर्ताओं के लिए एक वास्तविक दर्द है, यह आपके तीसरे आइटम को लगभग दुर्गम बनाता है।

Comments

स्कोच निश्चित रूप से सही है, मैकमोर का आवेदन फॉर्म फ़ील्ड का एक बड़ा दुरुपयोग है।

— जिंजरब्रेडबॉय

सही है, लेकिन मोबाइल उपकरणों के बारे में क्या? यदि मीडिया क्वेरी पर "डिस्प्ले: हिडन" स्विच के साथ स्वीकृत उत्तर को वास्तविक ड्रॉपडाउन मेनू के साथ जोड़ा जाता है, तो क्या आपकी चिंताएं अभी भी मान्य हैं? या आपके पास एक बेहतर उपाय है?

— स्किप्पी ले ग्रांड गौरौ

@SkippyleGrandGourou बेहतर समाधान यह है कि इसमें वास्तविक लिंक के साथ सिर्फ एक मेनू का उपयोग किया जाए।

— fuxia

Answer 4

स्वीकृत समाधान अच्छा लगता है, लेकिन एक मामला है जो इसे संभाल नहीं सकता है:

"ऑन्चेंज" ईवेंट को ट्रिगर नहीं किया जाएगा जब उसी विकल्प को फिर से चुना जाएगा। इसलिए, मैं निम्नलिखित सुधार के साथ आया:

एचटीएमएल

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

Comments

या बस शुरुआत में एक खाली विकल्प जोड़ें:<option value="">&nbsp;</option>

— काई नैक

Answer 5

(मेरे पास साख के उत्तर पर टिप्पणी करने के लिए पर्याप्त प्रतिष्ठा नहीं है।)

मुझे स्क्रीन पाठकों के साथ कोई अनुभव नहीं है और मुझे यकीन है कि आपके अंक मान्य हैं।

हालाँकि जहाँ तक कीबोर्ड का उपयोग करने के लिए चयन में हेरफेर करने के लिए है, कीबोर्ड का उपयोग करके किसी भी विकल्प का चयन करना तुच्छ है:

नियंत्रण के लिए TAB

चयन सूची खोलने के लिए अंतरिक्ष

वांछित सूची आइटम पर स्क्रॉल करने के लिए ऊपर या नीचे तीर

इच्छित आइटम का चयन करने के लिए दर्ज करें

केवल ENTER पर ही onchange या (JQuery .change ()) ईवेंट फायर होता है।

हालांकि मैं व्यक्तिगत रूप से सरल मेनू के लिए एक प्रपत्र नियंत्रण का उपयोग नहीं करूंगा, लेकिन कई वेब अनुप्रयोग हैं जो पृष्ठ की प्रस्तुति को बदलने के लिए प्रपत्र नियंत्रण का उपयोग करते हैं (उदाहरण के लिए, सॉर्ट क्रम।) इन्हें AJAX द्वारा नई सामग्री को लोड करने के लिए लागू किया जा सकता है। पृष्ठ, या, पुराने कार्यान्वयन में, नए पृष्ठ लोड को ट्रिगर करके, जो अनिवार्य रूप से एक पृष्ठ लिंक है।

IMHO ये एक फॉर्म कंट्रोल के वैध उपयोग हैं।

Answer 6

<select>टैग एक ड्रॉपडाउन सूची बनाता है। आप एक ड्रॉपडाउन के अंदर html लिंक नहीं डाल सकते हैं।

हालांकि, जावास्क्रिप्ट लाइब्रेरी हैं जो समान कार्यक्षमता प्रदान करती हैं। यहाँ एक उदाहरण है: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm

Answer 7

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

Comments

हालांकि यह कोड प्रश्न का उत्तर दे सकता है, लेकिन यह समस्या का हल कैसे और / या इसके बारे में अतिरिक्त संदर्भ प्रदान करता है, इससे उत्तर के दीर्घकालिक मूल्य में सुधार होगा।

— rgmt

Answer 8

इस कोड को आज़माएं

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