2011-12-28 92 views
9

¿Cómo puedo agregar o eliminar opciones en JQuery UI Multiselect? Estoy inicializando el multiselección en la carga de la página y necesito eliminar los valores existentes y agregar nuevos valores basados ​​en otra selección. Estoy de inicializar el multiselect al cargar la página usando:jquery multiselect recargar

$("#multipleselectboxId").multiselect(); 

Después de eso, estoy añadiendo valores a la caída múltiple hacia abajo usando jQuery append() y remove() métodos que están trabajando bien con desplegable original, pero en la selección múltiple no están recibiendo reflejada .

¿Alguien puede ayudar con esto?

Respuesta

13

he encontrado la solución para esto, primero destruir el multiselect y reiniciarlo, gracias por @ Brandon Joyce,

soluciones para esto es

$("#multipleselectboxId").append(toAppend); 
$("#multipleselectboxId").remove(toRemove); 

$("#multipleselectboxId").multiselect('destroy'); 
$("#multipleselectboxId").multiselect(); 
+1

Esta respuesta me resulta confusa. ¿Puedes explicar las dos primeras líneas de tu solución y cómo se relacionan con la recarga? – IcedDante

+0

Disculpe, ¿está seguro de que no debería aceptar la respuesta de @Brandon Joyce como la primera respuesta verdadera? –

+0

¡Exactamente lo que estaba buscando! Usar 'destruir' antes de inicializar el multiselect resolvió mi problema! ¡Gracias! – AxleWack

20

Para que uno sólo podría destruir y reiniciar después de cambiar ...

$("#multipleselectboxId").append(toAppend).multiselect("destroy").multiselect(); 

También hay otro plugin con una función de actualización: EricHynds's Multiselect

$("#multipleselectboxId").append(toAppend).multiselect("refresh"); 
+0

no. Lo he intentado, no está funcionando y el complemento que has mencionado no es el mismo que el que estoy usando, estoy usando este enlace http://quasipartikel.at/multiselect_original/ –

+1

Ah, bueno, si todo lo demás falla, ¿puedes destruirlo y reiniciarlo? Parece que está usando la fábrica de widgets así que esto debería ser posible. –

+0

puede actualizar su respuesta según mi respuesta a continuación para marcar como respuesta aceptada –

1

bien este plugin funciona bien pero tengo un pb con destroy y filter: mis datos combinados se cargan con ajax. Por lo tanto, cuando se actualizan los datos con la llamada ajax, llamo destruyo para actualizar el plugin:

myCombo.multiselect('destroy'); 
myCombo.multiselect().multiselectfilter(); 

Funciona para la primera llamada: combo vacía, llamada Ajax para cargar datos, llamar a las funciones anteriormente. Pero si actualizo los datos combinados y vuelvo a llamar a las funciones anteriores, ¿desapareció el filtro? ¿Alguien experimentó este pb antes y encontró una solución?

0

he usado de esta manera:

$("#<%= cmbInBayiID.ClientID %>").multiselect().trigger('reset'); 

Funcionó.

+2

Usar scriplets es malo y deberías sentirte mal. –

3

Estaba intentando reconstruir multiselect por .multiselect("destroy") y .multiselect(), pero no funcionó, así que finalmente encontré esta solución funcionó para mí.

$.each(jsonArray, function(i, val) { 
    $('#frmarticles-f_category_id').append('<option value="'+i+'">'+val+'</option>').multiselect('rebuild'); 
}); 
1

Gracias, esto ayudó. Yo estaba usando widget de selección múltiple de interfaz de usuario y esto es lo que funcionó

jQuery("select[title='" + FieldNameTitleText + "']").append("<option value='" + OptionValue+ "'>" + OptionText + "</option>").multiselect("refresh"); 
+0

Encadenado o no después de "append()" utilizando "actualizar" funciona bien. Gracias. – caglaror

0

En mi caso, sólo quería para reemplazar todo el contenido previo de selección múltiple con uno nuevo.

Esto funcionó para mí:

$('#multiselect_id').html(newHtml); 
$('#multiselect_id').multiselect('refresh'); 
0

Aquí es lo que hice :; puede ser más de lo necesario, pero funcionó para mí.

original "seleccionar" código que requiera modificación:

<select id="MySelect" name="selection"> 
<option value="1">One</option> 
<option value="2">Two</option> 
</select> 

que reconstruir la lista de opciones en PHP, lo envía a la vía JavaScript JSON, y construir/almacenar la nueva lista en una variable. Por ejemplo:

// this is similar to if we got it from PHP 
var newList = '<option value="A">Alpha</option> 
<option value="B">Beta</option> 
<option value="C">Gamma</option>'; 

Ahora, para cambiar esto alrededor del widget jQuery UI Selección múltiple:

$('#MySelect').html(''); // clear out old list 
$('#MySelect').multiselect('destroy'); // tell widget to clear itself 
$('#MySelect').html(newList); // add in the new list 
$('#MySelect').multiselect(); // re-initialize the widget 

En particular, me re-inicializado con los parámetros, por ejemplo:

$('#MySelect').multiselect({selectedList: 4, header: false}); 

Si alguien ha leído hasta aquí y sigue teniendo problemas, pruébelo.

0

Para wenzhixin MultiSelect:

var i = jQuery('input'); 
i.data('multipleSelect').$parent.remove(); 
i.removeData('multipleSelect'); 
i.show(); 
0
function setMultiSelect(idElement, paramVal){ 
     eval("$('#"+idElement+"').multiselect('uncheckAll')"); 
     $.each($('input[name="multiselect_'+idElement+'"]'), function(k,i) {  
      if(paramVal.indexOf(this.value)!=-1){ 
       this.checked = true; 
      } 
     }); 
     eval("$('#"+idElement+"').multiselect('update')"); 
    } 
+1

¿Podría explicarme qué hace esto? – Vemonus

0
var valArr = ["1", "2"], 
     i = 0, 
     size = valArr.length, 
    $options = $('#MySelect option'); 

for (i; i < size; i++) { 
    $options.filter('[value="' + valArr[i] + '"]').prop('selected', true); 
} 

$('#MySelect').multiselect('reload'); 

1.valArr es valores de seleccione Opciones
de 2.for bucle a conjunto seleccionado a la opción emparejado basan en Valarr
3.our cambios es solo en el elemento de selección oculto
4.para cambiar en los elementos generados multiselección tenemos que volver a cargar
5. Cada complemento puede tener un nombre diferente para volver a cargar, por ejemplo: actualizar, actualizar

+1

No solo publiques el código como un aswer. Explícalo un poco. –