Cómo abrir Elegido a través de JavaScript?

Question

Necesito abrir el Chosen dropdown a través de JavaScript para que los usuarios no tengan que hacer clic en la selección para mostrarlo, ¿cómo se puede hacer esto?

Answer 1

Esto resuelve el problema,

sólo asegúrese chzn de selección es el ID de su selecto .

chzn soltar permanecerá abierta después de usuarios hacen clic en una opción:

 $('#chzn-select').change(function(event) 
     { 
      $('.chzn-drop').css('left', 0); 
     }); 

Answer 2

Puede abrir un elegido caja de selección a través de JS haciendo:

$('#<id-of-your-select>_chzn').trigger('mousedown'); 

donde <id-of-your-select> es el ID de su elemento <select>.

Por ejemplo: si su elemento <select> es como <select id="foo" ...>, a continuación, el código anterior se convertirá en:

$('#foo_chzn').trigger('mousedown'); 

Answer 3

@ respuesta de Tzvi es valioso en el en caso de que usted está tratando de desencadenar la elegida para que se mantenga abierta después de una selección está hecho (IE: hacer selecciones múltiples de una vez). Permítame esto un poco (actualizado para elegido 1.0, por cierto):

$('#selectbox').change(function() { 
    $('#selectbox_chosen .chosen-drop').css('left', '0'); 
}); 

$('html').click(function() { 
    $('#selectbox_chosen .chosen-drop').css('left', ''); 
}); 

$('#selectbox_chosen .chosen-drop').click(function(e) { 
    e.stopPropagation(); 
}); 

Esencialmente Obliga al desplegable elegido permanecer abierta reemplazando algunos css que suele ser en su lugar por la clase "activa". Luego tenemos un par de eventos de clic que deshacen esto si haces clic fuera del menú desplegable. Funcionó perfectamente para mí

Editar: Por cierto, si realmente desea activar el menú desplegable a través de JS, el uso del Escogido 1.0 API:

$('#selectbox').trigger('chosen:open') 

En el contexto de la pregunta original, esto le permitirá abrir la caja o reabra la caja después de hacer una selección. Sin embargo, no mantendrá la caja abierta después de realizar una selección (sin cerrar por un momento).

Answer 4

puede agregar las siguientes dos líneas a su código que mantendrá su elegido siempre abierto. Funcionó para mí

list_start es su ID de elemento de selección.

("#list_start").trigger('chosen:open'); 
$('.chosen-drop').css('left', 0); 

Answer 5

En la actualización Chosen jquery plugin siguientes funciona bien con stopPropagation.

$("#selectbox").trigger("chosen:open"); \t \t \t 
 
event.stopPropagation();

$(document).ready(function() { 
 
    $("#selectbox").chosen({}); 
 
    $("button").click(function() { 
 
    $("#selectbox").trigger("chosen:open"); 
 
    event.stopPropagation(); 
 
    }); 
 
});

#selectbox { 
 
    width: 140px 
 
}

<link href="http://harvesthq.github.io/chosen/chosen.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://harvesthq.github.io/chosen/chosen.jquery.js"></script> 
 

 

 
<select id="selectbox"> 
 
    <option val="option1">Option 1</option> 
 
    <option val="option2">Option 2</option> 
 
    <option val="option3">Option 3</option> 
 
    <option val="option4">Option 4</option> 
 
    <option val="option5">Option 5</option> 
 
    <option val="option6">Option 6</option> 
 
</select> 
 

 

 
<button>Trigger Chosen</button>

Answer 6

Es muy raro, pero me parece la respuesta está utilizando el tiempo de espera

de alguna manera Neet de tiempo de espera de primera tal vez porque mi elemento se clona esperanza útil fo r otros

setTimeout(function(){ firstElement.trigger("chosen:open"); }, 100);