Spust po kliknięciu w polu wyboru na hover

Question

Próbuję automatycznie otworzyć okno, gdy najedzie się na niego, jakby go kliknęło. czy to możliwe?

Myślę mogę to zrobić łatwo z jQuery ...

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

jednak, że nic nie robi. Jakieś pomysły?

Answer 1

W końcu udało mi się to zrobić! Potrzebujesz Chosen; jak inni zwrócili uwagę, nie można tego zrobić z normalnym select, ponieważ nie ma dostępnych zdarzeń do użycia. Ale to otworzy menu po najechaniu myszką na select i zamknij je, gdy wysyłasz mysz, co jest dokładnie tym, czego pragnąłem.

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> 

JS:

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

$("#dropdown").trigger("liszt:open"); co otwiera menu. Nie ma odpowiednika dla zdarzenia, które ma zostać uruchomione, gdy chcesz je zamknąć (o ile wiem), ale wyzwolenie na nimma taki sam efekt.

Answer 2

trigger wywołują tylko funkcje powiązane za pomocą jednej z funkcji wiążących jQuery.

Nie

ma możliwości cross-browser, aby otworzyć select z javascript (to może można zadzwonić this.click() w niektórych wersjach IE, ale nie mogę przetestować, a jestem pewien, że nie ma sposobu na inny przeglądarki).

Answer 3

To nie jest możliwe. Możesz zaimplementować własną wtyczkę wyboru lub wtyczkę Chosen, ale jest to szkodliwe z punktu widzenia użyteczności. Również pomyśl o trigger('focus').

Answer 4

Minęło trochę czasu, ale nie jest to rozwiązanie nie widzę tutaj, używając hover aby zmienić długość select:

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

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

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

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

A oto długopis gdzie jest trochę więcej niż gołej konieczności i ma pewne stylizacji:

Demo

Answer 5

Unfortun metoda z wybrańcem - nie zadziałała dla mnie.

Ale myślałem, że mogę utworzyć własny selektor na 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> 

JS:

$('.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