JQuery multiselect-définit une valeur sélectionnée dans la liste déroulante multiselect
J'ai une liste déroulante multiselect comme ci-dessous
<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>
Au chargement de la page, j'obtiendrai un tableau de valeur comme [101,102]. Je devrais parcourir le tableau et sélectionner les valeurs (les cases à cocher correspondant aux ID doivent être cochées). S'il vous plaît aider.
15 réponses
//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");
Merci à tous pour vos réponses.
Prenant toutes vos réponses comme ligne directrice, j'ai résolu le problème avec le code ci-dessous:
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");
}
Merci encore pour tout votre soutien.
C'est censé être aussi simple que ceci:
<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>
Vérifier mon Violon: https://jsfiddle.net/luthrayatin/jaLygLzo/
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);
}
Voici une démo
Ce code devrait aider:
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);
}
À Partir d'un tableau php dans le 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
// puis dans le script JS
$("#multiselectbox").val(<?php echo $javascript_str; ?>);
// Then refresh
$("#multiselectbox").multiselect("refresh");
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();
});
Sélectionne les options dont la valeur correspond aux valeurs du tableau.
Par exemple
$("#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
Ou par 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>
Fonctionne bien pour moi, changez les identifiants selon vos besoins.
$("#FormId select#status_id_new").val('');
$("#FormId select#status_id_new").multiselect("refresh");
J'ai obtenu une meilleure solution de documentation jQuery-multiselect .
var data = [101,102];
$("#data").multiSelect('deselect_all');
$("#data").multiSelect("select",data);
$("#dropDownId").val(["130860","130858"]);
$("#dropDownId").selectmenu('refresh');
Ceci est mon exemple de code. J'ai des nombres séparés par des virgules pour la liste déroulante multi select et je veux sélectionner plusieurs options à partir de valeurs séparées par des virgules.
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);
}
}
});
C'est ce qui a fonctionné de moi en utilisant un tableau en entrée. Décochez d'abord toutes les options, puis cliquez sur les options choisies en utilisant 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();
}
J'ai fini par avoir à faire un léger changement en utilisant l'événement click sur l'élément d'entrée en définissant également l'accessoire vérifié après avoir déclenché l'événement click.
$(y.Ctrl).multiselect("widget").find(":checkbox").each(function () {
if ($.inArray(this.value, uniqueVals) != -1) {
$(this).click();
$(this).prop('checked', true);
}
});
, Vous pouvez essayer ceci:
$( "#data" ).val([ "100", "101" ]);