Disparador Haga clic en el cuadro de selección al colocar el cursor sobre el elemento

Question

Estoy intentando que un cuadro select se abra automáticamente cuando el uso sobre él, como si lo hubieran hecho clic. es posible?

Me gustaría pensar que podía hacer esto fácilmente con jQuery ...

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

Pero eso no hace nada. ¿Algunas ideas?

Answer 1

¡Finalmente conseguí que esto funcionara! Necesita Chosen; como otros han señalado, no puede hacer esto con un select normal porque no hay eventos disponibles para usar. Pero esto abrirá el menú al pasar el mouse por encima del select y lo cerrará cuando elimine el mouse, que es el efecto exacto que quería.

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"); es lo que se abre el menú. No existe un evento equivalente liszt:close que se active cuando desee cerrarlo (hasta donde yo sé), pero activarlo click tiene el mismo efecto.

Answer 2

trigger solo llama a las funciones vinculadas mediante una de las funciones de enlace de jQuery.

No hay manera cruzada navegador para abrir un grupo selecto de Javascript (se podría sea posible llamar this.click() en algunas versiones de IE pero no puedo probar, y estoy seguro de que no hay manera de otra navegadores).

Answer 3

Esto no es posible. Solo puede implementar su propio complemento select-box o Chosen, pero esto es malo para la usabilidad. También piense en trigger('focus').

Answer 4

Ha sido un tiempo, pero no es una solución, no veo aquí, usando hover para cambiar la longitud de select:

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

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

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

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

Y aquí está una pluma donde es un poco más que la necesidad básica y tiene algo de estilo:

Demo

Answer 5

Unfortun definitivamente el método con Elegido - no funcionó para mí.

Pero pensé que podría hacer mi propio selector en 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