jquery - dropdownlist - select multiple css

JQuery multiselect: establece un valor como seleccionado en el menú desplegable multiselect

Question

Estoy teniendo un menú desplegable de selección múltiple como abajo

<select id="data" name="data" class="data" multiple="multiple">
<option value="100">foo</option>
<option value="101">bar</option>
<option value="102">bat</option>
<option value="103">baz</option>
</select>

Al cargar la página, obtendré una matriz de valor como [101,102]. Debo iterar a través de la matriz y hacer que los valores seleccionados (las casillas de verificación correspondientes a las ID deben estar marcados). Por favor ayuda.

Answer 1

El sitio oficial ha mencionado (en la sección "¿Marcar o desmarcar manualmente una casilla de verificación?") Solo para usar click ()

p.ej

$("#ddl_singleSelect")
.multiselect("widget")
.find(":radio[value='''']").click(); // change displayed selectedText
$("#ddl_singleSelect option[value='''']")
.prop("selected", true) // change val()
.trigger("change"); // fire change event
$("#ddl_multiselect").multiselect("uncheckAll"); // init by de-selecting all
$("#ddl_multiselect")
.multiselect("widget")
.find( ":checkbox[value=''1'']"
+ ",:checkbox[value=''2'']"
+ ",:checkbox[value=''3'']"
+ ",:checkbox[value=''4'']"
).click(); // change displayed selecetdText
$("#ddl_multiselect")
.find( "option[value=''1'']"
+ ",option[value=''2'']"
+ ",option[value=''3'']"
+ ",option[value=''4'']"
).prop("selected", true); // change val()
$("#ddl_multiselect").trigger("change"); // fire change event

O por HTML

<select name="example-presets" multiple="multiple" size="5">
<option value="option1" selected="selected">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4" selected="selected">Option 4</option>
<option value="option5" disabled="disabled">Option 5</option>
<option value="option6" disabled="disabled">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
</select>
....
<script type="text/javascript">$("select").multiselect();</script>

Answer 2

Espero que estas funciones te ayuden.

$ (''# your-select''). multiSelect (''select'', String | Array);

$ (''# your-select''). multiSelect (''deselect'', String | Array);

$ (''# your-select''). multiSelect (''select_all'');

$ (''# your-select''). multiSelect (''deselect_all'');

$ (''# your-select''). multiselección (''actualizar'');

Referencia por este sitio Referencia

Answer 3

Este es mi ejemplo de código. Tengo números separados por comas para el menú desplegable de selección múltiple y quiero seleccionar opciones opciones múltiples de valores separados por comas.

var selected_tags_arr = new Array();
var selected_tags = 1,2,4;
selected_tags_arr = selected_tags.split(",");
$(''#contact_tags option'').each(function (){
var option_val = this.value;
for (var i in selected_tags_arr) {
if(selected_tags_arr[i] == option_val){
$("#contact_tags option[value=''" + this.value + "'']").attr("selected", 1);
}
}
});

Answer 4

Esto es lo que funcionó de mí usando una matriz como entrada. Primero desmarque todas las opciones, luego haga clic en las opciones elegidas usando jquery

var dimensions = ["Dates","Campaigns","Placements"];
$(".input-dimensions").multiselect("uncheckAll");
for( var dim in dimensions) {
$(".input-dimensions").multiselect("widget")
.find(":checkbox[value=''" + dimensions[dim] + "'']").click();
}

Answer 5

Gracias a todos por sus respuestas o comentarios.

Tomando todas sus respuestas como guía, resolví el problema con el siguiente código:

var valArr = [101,102];
i = 0, size = valArr.length;
for(i; i < size; i++){
$("#data").multiselect("widget").find(":checkbox[value=''"+valArr[i]+"'']").attr("checked","checked");
$("#data option[value=''" + valArr[i] + "'']").attr("selected", 1);
$("#data").multiselect("refresh");
}

Gracias una vez más por todo su apoyo.

Answer 6

Obtuve una mejor solución de la documentación jquery-multiselect .

var data = [101,102];
$("#data").multiSelect(''deselect_all'');
$("#data").multiSelect("select",data);

Answer 7

Puedes probar esto:

$( "#data" ).val([ "100", "101" ]);

Answer 8

Se supone que es tan simple como esto:

<select id=''multipleSelect'' multiple=''multiple''>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script type=''text/javascript''>
$(''#multipleSelect'').val([''1'', ''2'']);
</script>

Compruebe mi Fiddle: https://jsfiddle.net/luthrayatin/jaLygLzo/

Answer 9

Terminé teniendo que hacer un ligero cambio con el evento de clic en el elemento de entrada al configurar también la hélice marcada después de disparar el evento de clic.

$(y.Ctrl).multiselect("widget").find(":checkbox").each(function () {
if ($.inArray(this.value, uniqueVals) != -1) {
$(this).click();
$(this).prop(''checked'', true);
}
});

Answer 10

de un array php en el multiselect ...

$PHP_array=array(); // create array anyway you need to in PHP
array_push($PHP_array,20); // Single ID values
array_push($PHP_array,22);
$javascript_str = json_encode($PHP_array); // JSON ENCODE 

// luego en el script JS

$("#multiselectbox").val(<?php echo $javascript_str; ?>);
// Then refresh
$("#multiselectbox").multiselect("refresh");

Answer 11

ese código debería ayudar:

var selected=[101,103];
var obj=$(''#data'');
for (var i in selected) {
var val=selected[i];
console.log(val);
obj.find(''option:[value=''+val+'']'').attr(''selected'',1);
}

Answer 12

trabajar bien para mí, cambiar las identificaciones de acuerdo a sus requerimientos.

$("#FormId select#status_id_new").val('''');
$("#FormId select#status_id_new").multiselect("refresh");

Answer 13

//Do it simple
var data="1,2,3,4";
//Make an array
var dataarray=data.split(",");
// Set the value
$("#multiselectbox").val(dataarray);
// Then refresh
$("#multiselectbox").multiselect("refresh");

Answer 14

var valArr = [101,102], // array of option values
i = 0, size = valArr.length, // index and array size declared here to avoid overhead
$options = $(''#data option''); // options cached here to avoid overhead of fetching inside loop
// run the loop only for the given values
for(i; i < size; i++){
// filter the options with the specific value and select them
$options.filter(''[value="''+valArr[i]+''"]'').prop(''selected'', true);
}

Aquí hay una demo.

Answer 15

 var valArr = ["1","2","3"];
/* Below Code Matches current object''s (i.e. option) value with the array values */
/* Returns -1 if match not found */
$("select").multiselect("widget").find(":checkbox").each(function(){
if(jQuery.inArray(this.value, valArr) !=-1)
this.click();
});

Esto selecciona las opciones cuyo valor coincide con los valores en la matriz.

Answer 16

$("#dropDownId").val(["130860","130858"]);
$("#dropDownId").selectmenu(''refresh'');