jquery - multiple - chosen:updated

¿Cómo puedo restablecer una opción de selección elegida por jquery con jQuery?

Question

He intentado numerosas cosas y nada parece estar funcionando.

Estoy usando jQuery y el complemento elegido.

Métodos que he intentado:

var select = jQuery(''#autoship_option'');

select.val(jQuery(''options:first'', select).val());

jQuery(''#autoship_option'').val('''');

jQuery(''#autoship_option'').text('''');

jQuery(''#autoship_option'').empty('''');

jQuery("#autoship_option option[value='''']").attr(''selected'', true);

Siempre muestra la opción de Autoenvío activo una vez que ha sido seleccionada. Parece que no puedo hacerlo para borrar la selección.

Aquí está el cuadro de selección:

<select id="autoship_option" data-placeholder="Choose Option..." 
style="width: 175px;" class="chzn-select">
    <option value=""></option>
    <option value="active">Active Autoship</option>
</select>

¿Alguien que esté familiarizado con Chosen y pueda borrar un cuadro de selección con una opción? (Tendrá más opciones en el futuro.

Answer 1

Creo que tiene que asignar un nuevo valor a la selección, por lo que si desea borrar su selección probablemente quiera asignarlo al que tiene valor = "". Creo que podrás obtenerlo asignando el valor a una cadena vacía para que .val ('''')

Answer 2

En chrome version 49

siempre necesitas este código

$("select option:first").prop(''selected'', true)

Answer 3

Establecer el valor del elemento select en una cadena vacía es la forma correcta de hacerlo. Sin embargo, eso solo actualiza el elemento de select raíz. El elemento personalizado chosen no tiene idea de que la select raíz se ha actualizado.

Para notificar que se ha modificado la selección, debe activar chosen:updated :

$(''#autoship_option'').val('''').trigger(''chosen:updated'');

o, si no está seguro de que la primera opción sea una cadena vacía, use esto:

$(''#autoship_option'')
    .find(''option:first-child'').prop(''selected'', true)
    .end().trigger(''chosen:updated'');

Lea la documentación aquí (busque la sección titulada Actualización dinámica elegida ).

PS Las versiones más antiguas de Chosen utilizan un evento ligeramente diferente:

$(''#autoship_option'').val('''').trigger(''liszt:updated'');

Answer 4

Esto es más efectivo que encontrar.

$(''select'').children(''option'').first().prop(''selected'', true)
$(''select'').trigger("chosen:updated");

Answer 5

Exactamente tuve el mismo requisito. Pero restablecer la lista desplegable configurando simplemente una cadena vacía con jquery no funcionará. También debe activar la actualización.

Html:
<select class=''chosen-control''>
<option>1<option>
<option>2<option>
<option>3<option>
</select>

Jquery:
$(''.chosen-control'').val('''').trigger(''liszt:updated'');

A veces, según la versión del control elegido que está utilizando, es posible que deba usar la siguiente sintaxis.

$(''.chosen-control'').val('''').trigger("chosen:updated");

Referencia: Cómo restablecer Jquery elegido, seleccione la opción

Answer 6

Intente esto para volver a cargar el cuadro de selección actualizado con Latest Chosen JS.

$("#form_field").trigger("chosen:updated");

http://harvesthq.github.io/chosen/

Se actualizará el menú desplegable elegido con el nuevo cuadro de selección cargado con Ajax.

Answer 7

La primera opción debería ser suficiente: http://jsfiddle.net/sFCg3/

jQuery(''#autoship_option'').val('''');

Pero debe asegurarse de que está ejecutando esto en un evento como click en un botón o ready o documento, como en el archivo jsfiddle.

También asegúrese de que siempre haya un atributo de valor en las etiquetas de opción. Si no, algunos navegadores siempre vuelven vacíos en val() .

Editar:
Ahora que ha aclarado el uso del complemento Chosen, debe llamar

$("#autoship_option").trigger("liszt:updated");

después de cambiar el valor para que actualice el interfase.

http://harvesthq.github.com/chosen/

Answer 8

Las nuevas bibliotecas elegidas no usan el liszt. Utilicé lo siguiente:

document.getElementById(''autoship_option'').selectedIndex = 0;
$("#autoship_option").trigger("chosen:updated");

Answer 9

No estoy seguro de si esto se aplica a la versión anterior de elegida, pero ahora en la versión actual (v1.4.1) tienen una opción $(''#autoship_option'').chosen({ allow_single_deselect:true }); Esto agregará un ícono ''x'' junto al nombre seleccionado. Use la ''x'' para borrar el campo ''seleccionar''.

PD: asegúrate de tener ''chosen-sprite.png'' en el lugar correcto según el elegido .css para que los iconos estén visibles.

Answer 10

Prueba esto:

$("#autoship_option option[selected]").removeAttr("selected");

Answer 11

Puede probar esto para restablecer (vacío) desplegable

 $("#autoship_option").click(function(){
            $(''#autoship_option'').empty(); //remove all child nodes
            var newOption = $(''<option value=""></option>'');
            $(''#autoship_option'').append(newOption);
            $(''#autoship_option'').trigger("chosen:updated");
        });

Answer 12

Si está utilizando chosen , un complemento de jquery, para actualizar o borrar el contenido del menú desplegable use:

$(''#dropdown_id'').empty().append($(''< option>''))

dropdown_id.chosen().trigger("chosen:updated")

chosen:updated evento chosen:updated se re-build en función del contenido actualizado.

Answer 13

Si necesita tener la primera opción seleccionada sin importar su valor (a veces el primer valor de la opción no está vacío) use esto:

$(''#autoship_option'').val($(''#autoship_option option:first-child'').val()).trigger("liszt:updated");

Obtendrá el valor de la primera opción y la configurará como seleccionada, luego activará la actualización en Elegido. Así que funciona como restablecer la primera opción en la lista.

Answer 14

Simplemente agregue un cambio de gatillo como este:

$(''#selectId'').val('''').trigger(''change'');

Answer 15

Yo uso esto:

$(''idSelect'').val([]);

Probado en IE, Safari y Firefox

Answer 16

HTML:

<select id="autoship_option" data-placeholder="Choose Option..." 
        style="width: 175px;" class="chzn-select">
    <option value=""></option>
    <option value="active">Active Autoship</option>
</select>
<button id="rs">Click to reset</button>

JS:

$(''#rs'').on(''click'', function(){
    $(''autoship_option'').find(''option:selected'').removeAttr(''selected'');
});

Fiddle: http://jsfiddle.net/Z8nE8/

Answer 17

var config = {
      ''.chosen-select''           : {},
      ''.chosen-select-deselect''  : {allow_single_deselect:true},
      ''.chosen-select-no-single'' : {disable_search_threshold:10},
      ''.chosen-select-no-results'': {no_results_text:''Oops, nothing found!''},
      ''.chosen-select-width''     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }

Use la configuración anterior y aplique class=''chosen-select-deselect'' para deseleccionar manualmente y establecer el valor vacío

o si desea deseleccionar la opción en todos los combo, aplique la configuración como a continuación

var config = {
  ''.chosen-select''           : {allow_single_deselect:true},//Remove if you do not need X button in combo
  ''.chosen-select-deselect''  : {allow_single_deselect:true},
  ''.chosen-select-no-single'' : {disable_search_threshold:10},
  ''.chosen-select-no-results'': {no_results_text:''Oops, nothing found!''},
  ''.chosen-select-width''     : {width:"95%"}
}
for (var selector in config) {
  $(selector).chosen(config[selector]);
}

Answer 18

$(''#autoship_option'').val('''').trigger(''liszt:updated'');

y establezca el valor predeterminado de la opción en '''' .

Se debe utilizar con el jQuery actualizado seleccionado disponible en este enlace: https://raw.github.com/harvesthq/chosen/master/chosen/chosen.jquery.min.js .

Pasé un día completo para descubrir al final que jquery.min es diferente de chosen.jquery.min

Answer 19

jQuery("#autoship_option option:first").attr(''selected'', true);

Answer 20

jQuery(''.chosen-processed'').find(''.search-choice-close'').click();