ट्रिगर होवर

Question

पर चयन बॉक्स पर क्लिक करें, मैं select बॉक्स को स्वचालित रूप से खोलने की कोशिश कर रहा हूं जब उपयोग उस पर होवर करता है, जैसे कि उन्होंने इसे क्लिक किया था। क्या यह संभव है?

मुझे लगता है मैं jQuery के साथ आसानी से ऐसा कर सकता है लगता होगा ...

$("#settings-select").mouseover(
    function(){ 
     $(this).trigger("click"); 
    } 
); 

लेकिन वह कुछ नहीं करता है। कोई विचार?

Answer 1

मुझे अंत में यह काम करने के लिए मिला! आपको Chosen की आवश्यकता है; जैसा कि अन्य ने इंगित किया है, आप इसे सामान्य select के साथ नहीं कर सकते क्योंकि उपयोग करने के लिए कोई ईवेंट उपलब्ध नहीं है। लेकिन जब आप select पर माउसओवर करते हैं तो यह मेनू खुल जाएगा और जब आप माउसआउट करते हैं तो इसे बंद करें, जो कि मैं चाहता हूं कि सटीक प्रभाव है।

HTML:

<select id="dropdown" data-placeholder="Choose&hellip;"> 
    <option value="one">Option 1</option> 
    <option value="two">Option 2</option> 
    <option value="three">Option 3</option> 
</select> 

जे एस:

$("#dropdown").chosen().next(".chzn-container").hover(
    function(){ 
     $("#dropdown").trigger("liszt:open"); 
    }, 
    function(){ 
     $(this).trigger("click"); 
    } 
); 

$("#dropdown").trigger("liszt:open"); क्या मेनू खोलता है। जब आप इसे बंद करना चाहते हैं तो ट्रिगर करने के लिए कोई समतुल्य liszt:close ईवेंट नहीं है (जहां तक ​​मुझे पता है), लेकिन इसके बजाय click को ट्रिगर करना एक ही प्रभाव है।

Answer 2

trigger केवल jQuery के बाध्यकारी कार्यों में से एक के माध्यम से कार्यों को कॉल करें।

वहाँ

जावास्क्रिप्ट से एक का चयन करें खोलने के लिए कोई क्रॉस-ब्राउज़र तरीका है (यह संभव IE के कुछ संस्करणों पर this.click() कॉल करने के लिए हो सकता है, लेकिन मैं परीक्षण नहीं कर सकते, और मुझे यकीन है कि वहाँ अन्य पर कोई रास्ता नहीं है कर रहा हूँ ब्राउज़र)।

Answer 3

यह संभव नहीं है। आप केवल अपने स्वयं के चयन बॉक्स, या Chosen प्लगइन को लागू कर सकते हैं, लेकिन यह उपयोगिता के लिए बुरा है। trigger('focus') के बारे में भी सोचें।

Answer 4

यह एक समय हो गया है लेकिन वहाँ एक समाधान मैं यहाँ नहीं दिख रहा है, select की लंबाई को बदलने के लिए hover उपयोग कर रहा है:

$('select').hover(function() { 

    $(this).attr('size', $('option').length); 
}, function() { 

    $(this).attr('size', 1); 
}); 

http://codepen.io/anon/pen/avdavQ

और यहाँ एक कलम जहां उसे कुछ अतिरिक्त है नंगे आवश्यकता और की तुलना में कुछ स्टाइल है:

Demo

Answer 5

Unfortun औपचारिक रूप से चुना गया तरीका - मेरे लिए काम नहीं किया।

लेकिन मैंने सोचा कि मैं jQuery पर अपना स्वयं का चयनकर्ता बना सकता हूं।

HTML:

<div class='select'> 
    <p class='input'>Select option</p> 
    <input type='hidden' name='some_name_to_form' /> 
    <div class='hidden'> 
    <p value='id_1' >option long value</p> 
    <p value='id_2' >option 2</p> 
    <p value='id_3' >option 3</p> 
    </div> 
</div> 

जे एस:

$('.hidden p').click(function(){ 
    $(this).closest('.select').find('.input').text($(this).text()); 
    $(this).closest('.select').find('input').val($(this).attr('value')); 
    $(this).closest('.select').trigger("change"); 
}); 

$('.select').change(function(){ 
    // ... do stuff 
}); 

https://codepen.io/qwer643/pen/LebKpo