आप प्रोग्राम को HTML ड्रॉप डाउन (उदाहरण के लिए, माउसओवर के कारण) कैसे बता सकते हैं?

Question

आप प्रोग्राम selectको HTML को ड्रॉप डाउन करने के लिए कैसे कह सकते हैं (उदाहरण के लिए, माउसओवर के कारण)?

Comments

मैं डिफ़ॉल्ट के व्यवहार से पंगा नहीं लेने की सलाह <select>दूंगा, क्योंकि लोग उम्मीद करते हैं कि यह एक निश्चित तरीके का व्यवहार करेगा और आप अन्य प्लेटफार्मों (जैसे मोबाइल) पर लोगों को अपनी साइट का उपयोग करने से रोकेंगे।

— ब्रायन डोनोवन

@BrianDonovan ऐसा नहीं है कि आप इसके लिए कुछ हैंडलिंग नहीं जोड़ सकते हैं।

— मुर्दाघर।

@ शशिकांत: फ़ायरफ़ॉक्स क्रोम में न तो फ़ायरफ़ॉक्स 37 एनआर में काम नहीं करता है

— rubo77

ठीक है, मुझे लगता है कि पहले बेला ने काम किया। वैसे भी मैं अपनी टिप्पणी यहां हटा रहा हूं।

— shasi kant

@BrianDonovan वास्तव में, मोबाइल इस का एक अच्छा उपयोग मामला है ... प्रोग्रामिक रूप से एक चयन उत्पन्न करता है और फिर इसके विकल्प स्वचालित रूप से पॉप अप होते हैं।

— माइकल

Answer 1

आप इसे HTML चयन टैग के साथ नहीं कर सकते, लेकिन आप इसे जावास्क्रिप्ट और HTML के साथ कर सकते हैं । मौजूदा नियंत्रण के विभिन्न प्रकार हैं - उदाहरण के लिए, "सुझाव" सूची SO से जुड़ी हुई है "दिलचस्प / नजरअंदाज टैग" प्रविष्टि, या ईमेल पता के लिए जीमेल की खोज।

कई जावास्क्रिप्ट + HTML नियंत्रण हैं जो इस क्षमता को प्रदान करते हैं - विचारों के लिए स्वत: पूर्ण नियंत्रण देखें।

स्वतः पूर्ण नियंत्रण के लिए यह लिंक देखें ... http://ajaxcontroltoolkit.codeplex.com/

Comments

यह एक रोने वाली शर्म है - मोबाइल ब्राउज़र एक ओएस विशिष्ट स्क्रॉलिंग सूची प्रदान करते हैं, और मुझे स्वचालित रूप से पॉप अप करने की आवश्यकता होती है।

— माइकल

Answer 2

यह वास्तव में HTML + जावास्क्रिप्ट के साथ संभव हुआ करता था, हर जगह के बावजूद लोग कहते हैं कि यह नहीं है, लेकिन इसे बाद में हटा दिया गया था और अब काम नहीं करता है।

हालांकि, यह केवल क्रोम में काम करता था। यदि आप रुचि रखते हैं तो और पढ़ें।

---

HTML3 के लिए W3C वर्किंग ड्राफ्ट के अनुसार , धारा 3.2.5.1.7। इंटरएक्टिव सामग्री :

HTML में कुछ तत्वों का सक्रियण व्यवहार होता है, जिसका अर्थ है कि उपयोगकर्ता उन्हें सक्रिय कर सकता है। यह सक्रियण तंत्र पर निर्भर घटनाओं के अनुक्रम को ट्रिगर करता है [...] उदाहरण के लिए कीबोर्ड या वॉयस इनपुट का उपयोग करके, या माउस क्लिक के माध्यम से ।

जब उपयोगकर्ता किसी तत्व को परिभाषित सक्रियण व्यवहार के साथ क्लिक करने के अलावा अन्य तरीके से चलाता है, तो इंटरैक्शन इवेंट की डिफ़ॉल्ट क्रिया तत्व पर सिंथेटिक क्लिक सक्रियण चरण को चलाने के लिए होनी चाहिए ।

<select>एक इंटरएक्टिव कंटेंट होने के नाते, मेरा मानना ​​था कि यह संभव है कि प्रोग्राम को प्रदर्शित किया जाए <option>। आसपास खेलने के कुछ घंटों के बाद, मुझे पता चला कि इसका उपयोग करना document.createEvent()और .dispatchEvent()काम करना।

उस ने कहा, डेमो समय। यहां एक वर्किंग फिडल है।

---

HTML:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" onclick="runThis()">Show dropdown items</button>​

जावास्क्रिप्ट:

// <select> element displays its options on mousedown, not click.
showDropdown = function (element) {
    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);
};

// This isn't magic.
window.runThis = function () { 
    var dropdown = document.getElementById('dropdown');
    showDropdown(dropdown);
};

यदि कोई ऐसा करने का तरीका ढूंढता है, लेकिन क्रोम में नहीं, तो कृपया इस बेला को संशोधित करने के लिए स्वतंत्र महसूस करें ।

Comments

इसके लिए शुक्रिया! मुझे क्रोम में ठीक IE के ALT + DOWN ARROW व्यवहार का अनुकरण करने की आवश्यकता थी।

— जे ब्रायन मूल्य

काश मैं इसके लिए आपके इनाम में जोड़ सकता। बहुत बहुत धन्यवाद।

— एडम टटल

पर काम नहीं कर रहा है: IE10, FF 24। पर काम करता है: Chrome 30, Safari 6.0.5,Opera 16

— hitautodestruct

@AdamTuttle यह एंड्रॉइड 4.4.2 पर काम नहीं करता है

— मिर्को

अब यह क्रोम 53+

— वाशिंगटन गाइडेड सेप

Answer 3

जेवियर हो का उत्तर कवर कर रहा है कि वर्तमान में बाहर मौजूद अधिकांश ब्राउज़रों में समस्या को कैसे हल किया जाए। लेकिन, जावास्क्रिप्ट द्वारा ईवेंट को अब प्रेषण / संशोधित नहीं करना अच्छा व्यवहार है । (जैसे, mousedownइस मामले में)

संस्करण 53+ से, Google Chrome बिना भरोसेमंद घटनाओं के लिए डिफ़ॉल्ट कार्रवाई नहीं करेगा । जैसे कि स्क्रिप्ट द्वारा बनाई या संशोधित की गई घटनाएं, या dispatchEventविधि के माध्यम से प्रेषित । यह परिवर्तन फ़ायरफ़ॉक्स और IE के साथ संरेखित करने के लिए है जो मुझे लगता है कि पहले से ही कार्रवाई नहीं कर रहा है।

परीक्षण के प्रयोजनों के लिए, फिडल ने प्रदान किया जेवियर का जवाब क्रोम 53+ में काम नहीं करेगा। (मैं इसे एफएफ और आईई का परीक्षण नहीं करता हूं)।

संदर्भ के लिए लिंक:

https://www.chromestatus.com/features/5718803933560832 https://www.chromestatus.com/features/6461137440735232

और initMouseEvent भी हटा दिया गया है

Comments

क्या यह माउसएवेंट्स का उपयोग करके किया जा सकता है? developer.mozilla.org/en-US/docs/Web/API/MouseEvent

— शामल परेरा

मुझे ऐसा नहीं लगता। क्या आपने कुछ कोशिश की?

— असीम केटी

Answer 4

यह वह निकटतम है जो मुझे प्राप्त हो सकता है, तत्व ऑनमूवर का आकार बदल सकता है, और ऑनमाउसआउट आकार को पुनर्स्थापित कर सकता है:

       <select onMouseOut="this.size=1;" onMouseOver="this.size=this.length;">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
      </select>

Comments

या <select onMouseOut = "this.size = 1;" onMouseOver = "this.size = this.length?"> ... </ SELECT>

— RealHowTo

इसके अलावा onchange = "this.size = 1" को जोड़ने की आवश्यकता है ताकि चयन होते ही मेनू ढह जाए। तत्व के सीएसएस नियमों को भी कॉन्फ़िगर करने की आवश्यकता है।

— gm2008

यह काम करने लगता है। चुनिंदा चौड़ाई सिकुड़ जाती है और फिर माउस को ईवेंट को मूल चौड़ाई पर रीसेट करने का कारण बनता है। यह एक जब्ती प्रभाव का कारण बनता है। एक निश्चित चौड़ाई निर्धारित करना इसे ठीक करना प्रतीत होता है। कुछ से अधिक आइटम के साथ सूची दृश्य को विस्तारित करती है।

— 1.21 गीगावाट

Answer 5

मैं इसे एक ही समस्या है और मैं इसे हल करने के लिए आसान तरीका html और css के साथ था।

select{
  opacity: 0;
  position: absolute;
}

<select>
  <option>option 1</option>
  <option>option 2</option>
  <option>option 3</option>
</select>
<button>click</button>

Comments

एक लंबे समय के बाद से मैंने इस दृष्टिकोण को देखा है, और वह संदर्भ है जिसे मैं खोजने की उम्मीद कर रहा था। ट्रिगर (बटन, img, div, आदि) के लिए छिपे हुए चयन के आकार से मिलान करने के लिए अतिरिक्त सीएसएस के साथ बेहतर ... 1) क्लिक करने योग्य क्षेत्र को ट्रिगर 2 भरता सुनिश्चित करता है) मेनू सीधे ट्रिगर के नीचे खुलता है। नोट: क्लिक करने योग्य क्षेत्र कुछ लेआउट में शीर्ष-सबसे अधिक तत्व है यह सुनिश्चित करने के लिए z-index जोड़ने की भी आवश्यकता हो सकती है।

— मावलो

हालाँकि, यदि उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करता है, तो बटन तदनुसार चलता रहता है, लेकिन चयन उसी स्थिति में रहता है; उम्मीद के मुताबिक नहीं। इसके लिए कोई समाधान?

— डेविड पोर्टाबेला

सही समाधान। लेकिन बेहतर हो सकता है कि लपेटें बटन और div पर इस तरह का चयन करें <div style='position:relative'><select> <option>option 1</option> <option>option 2</option> <option>option 3</option> </select> <button>click</button></div>@DavidPortabella

— Muhammet Can TONBUL

Answer 6

मुझे लगता है कि यह अब क्रोम में संभव नहीं है।

ऐसा लगता है कि क्रोम का संस्करण 53 इस कार्यक्षमता को अक्षम करता है जैसा कि असीम के टी द्वारा कहा गया है।

युक्ति के अनुसार http://www.w3.org/TR/DOM-Level-3-Events/#trusted-events

विश्वसनीय ईवेंट डिफ़ॉल्ट कार्रवाई (क्लिक इवेंट को छोड़कर) को फायर नहीं करना चाहिए।

हालाँकि उन्होंने इसे वेबव्यू में सक्षम किया है, लेकिन मैंने इसका परीक्षण नहीं किया है।

हमने पाया है कि कुछ वेबव्यू उनके अंदर फास्टक्लब का उपयोग कर रहे हैं और टूटने के जोखिम के कारण हम चयन पर मूसडाउन की अनुमति देने जा रहे हैं, भले ही वे अविश्वासित हों।

और इस चर्चा में डेवलपर्स को प्रोग्राम को छोड़ने के लिए प्रोग्राम को छोड़ने का विचार छोड़ दिया गया है।

Answer 7

यदि कोई अभी भी इसके लिए देख रहा है:

<select id="dropdown">
    <option value="Red">Red</option>
    <option value="Green">Green</option>
    <option value="Blue">Blue</option>
</select>
<br>
<button id="fire" type="button" >Show dropdown items</button>

जावास्क्रिप्ट:

var is_visible=false; 

$(document).ready(function(){

    $('#fire').click(function (e) { 
    var element = document.getElementById('dropdown');


    if(is_visible){is_visible=false; return;}
    is_visible = true;

    var event;
    event = document.createEvent('MouseEvents');
    event.initMouseEvent('mousedown', true, true, window);
    element.dispatchEvent(event);

    /* can be added for i.e. compatiblity.
      optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
    */
    e.stopPropagation();
    return false;
});


$(document).click(function(){is_visible=false; });
});

अपडेट करें:

एक तक इस समस्या का कोई सही समाधान नहीं है, लेकिन आप इस परिदृश्य से बचने की कोशिश कर सकते हैं। तुम ऐसा क्यों करना चाहते हो। मैं कुछ महीने पहले मोबाइल उपकरणों के लिए एक चयन प्लगइन बनाने के लिए सोच रहा था

https://github.com/HemantNegi/jquery.sumoselect

अंत में एक पारदर्शी चुनिंदा तत्व के साथ कस्टम डिव (या किसी अन्य तत्व) को मास्क करने के साथ समाप्त हुआ, ताकि यह उपयोगकर्ता के साथ सीधे संपर्क कर सके।

Comments

Github.com/HemantNegi/jquery.sumoselect जैसे प्लगइन्स एकमात्र क्रॉस-ब्राउज़र समाधान हैं जो वास्तव में डिफ़ॉल्ट नियंत्रण से बेहतर दिखते हैं।

— जस्टिन

iniMouseEventकाम करने लगता है, लेकिन काम क्यों नहीं $(select).trigger('mousedown')करता है?

— कोडिंग_डियोट

Answer 8

यहां मुझे सबसे अच्छा तरीका मिला। नोट यह केवल Windows पर IE के साथ काम करता है और आपके वेब को शायद एक सुरक्षित क्षेत्र में रहने की आवश्यकता होगी - क्योंकि हम शेल तक पहुंचते हैं। चाल यह है कि एएलटी-डाउन एरो एक चुनिंदा ड्रॉप डाउन खोलने के लिए एक शॉर्टकट कुंजी है।

<button id="optionsButton" style="position:absolute;top:10px;left:10px;height:22px;width:100px;z-index:10" onclick="doClick()">OPTIONS</button>
<select id="optionsSelect" style="position:absolute;top:10px;left:10px;height:20px;width:100px;z-index:9">
    <option>ABC</option>
    <option>DEF</option>
    <option>GHI</option>
    <option>JKL</option>
</select>
<script type="text/javascript">
   function doClick() {
       optionsSelect.focus();
       var WshShell = new ActiveXObject("WScript.Shell");
       WshShell.SendKeys("%{DOWN}");
   }
</script>

Comments

जब तक आप करते हैं यह काम नहीं करेगा इस ।

— Knu

@Knu Internet Explorer स्वचालित रूप से वैश्विक स्कोप के तत्व के संदर्भ में आईडी के तत्वों को जोड़ता है।

— user2428118

@KlasMellbourn शायद। वे अब अपने ब्राउज़रों को अधिक आज्ञाकारी बनाने की कोशिश कर रहे हैं। उल्लिखित "आकार" समाधान का उपयोग करें।

— sproketboy

Answer 9

यह सोचना बंद कर दें कि एक चीज असंभव है, कुछ भी करना असंभव है, जब आप करना चाहते हैं।

एक लड़के द्वारा बनाई गई जेएस फ़ंक्शन के इस विस्तार का उपयोग करें।

http://code.google.com/p/expandselect/

इस जेएस को शामिल करें और बस कॉल करें कि परम को अपनी चुनिंदा आईडी के रूप में पास करें, जैसे:

ExpandSelect(MySelect)

Comments

स्पष्ट है, कि जेएस ड्रॉप डाउन का कारण नहीं बनता है <SELECT>। जैसा कि स्पष्ट रूप से कहा गया है कि "ब्राउज़र शुद्ध जावास्क्रिप्ट में <select> के विस्तार की अनुमति नहीं देता है, उस नियंत्रण को केवल माउस का उपयोग करके सीधे उस पर क्लिक करके विस्तारित किया जा सकता है"। तो यह है "असंभव"! इसके बजाय जेएस कहता है "हम एक बार में प्रदर्शित होने वाले कई विकल्पों के साथ एक और चुनिंदा बनाकर विस्तारित <चयन> नियंत्रण की नकल करते हैं ..." जो कि काफी अलग है, और आपके उपयोग के मामले के लिए स्वीकार्य हो सकता है या नहीं भी हो सकता है ....

— जॉनब्र्वे

Answer 10

मैं गलत हो सकता हूं, लेकिन मुझे विश्वास नहीं है कि डिफ़ॉल्ट चयन बॉक्स के साथ संभव है। आप जेएस और सीएसएस के साथ कुछ कर सकते हैं जो वांछित परिणाम प्राप्त करता है, लेकिन (मेरी जानकारी के लिए) वेनिला का चयन न करें।

Answer 11

इस प्रश्न और इसी तरह के कुछ वर्कअराउंड के माध्यम से एक "HTML चयन" खोलना संभव है। हालाँकि ऐसा करने का एक साफ तरीका यह है कि आप अपने प्रोजेक्ट में "select2" या "चुनी हुई" जैसी चुनिंदा लाइब्रेरी जोड़ें। उदाहरण के लिए, select2 प्रोग्रामेटिक रूप से खोलना उतना ही आसान होगा:

$('#target-select').select2('open');

Answer 12

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

$('#cboSomething')[0].size = 3;
$('#cboSomething')[0].focus();

Comments

निश्चित नहीं है कि आप नीचे से मतदान क्यों कर रहे हैं क्योंकि यह "सबसे खराब" तरीका नहीं है। मैं इससे आसानी से बचूंगा क्योंकि यह आसपास के तत्वों के लेआउट को बदलता है। हालांकि मुझे लगता है कि @ सीएमएस से समाधान नियंत्रण पर ध्यान केंद्रित / धुंधला घटनाओं के साथ आसानी से समझा जाता है।

— मावलो