JQuery Bootstrap Multiselect plugin - Set a value as selected in the multiselect dropdown

Question

I am having a multiselect dropdown using the Boostrap Multiselect plugin (http://davidstutz.de/bootstrap-multiselect/) as below

<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>

On load of page, i will get an array of value like [101,102]. I should iterate through the array and make the values selected(check boxes corresponding to the ids should be checked). Please help.

Each item in the dropdown will have a checkbox. On selecting the item, the check box will come as checked. — Prince, Aug 06 '11 at 10:51
Thanks you all for your answers. Taking all your answers as guideline, i resolved the problem with the below code 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"); } Thanks once again for all your support. — Prince, Aug 06 '11 at 13:24

score 159 · Answer 1 · edited Jun 17 '12 at 11:01

159

//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");

edited Jun 17 '12 at 11:01

Bo Persson

90,663
31
146
203

answered Jun 17 '12 at 06:40

Tapon Sayeem

1,599
2
9
2

2

What is the #multiselectbox ? – Tito Jun 03 '15 at 14:40
@Tito the dropdown element. – Moxet Khan Jan 09 '17 at 13:47
2

$("#ddl_multiselect").trigger("change"); using this instead of refresh worked for me. – StealthTrails Jul 26 '17 at 22:05
multiselect() is not a jQuery function: http://api.jquery.com/?s=multiselect All I get is "multiselect is undefined." Yatin's answer below is both simpler and actually works. – HoldOffHunger Nov 22 '17 at 18:10
@TaponSayeem its really very helpful nice and clean code – Priya Jan 11 '18 at 19:58
The issue for me was that refresh doesn't work try reload instead. This may have to do with different libs or different versions. $("#multiselectbox").multiselect("reload"); – Deathstalker Sep 19 '19 at 18:28
This should be the accepted answer. Thanks! – jcrv May 13 '21 at 13:13

score 25 · Accepted Answer · edited Nov 22 '17 at 18:03

25

Thank you all for your answers.

Taking all of your answers as a guideline, I resolved the problem with the below code:

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");
}

Thanks once again for all your support.

edited Nov 22 '17 at 18:03

HoldOffHunger

18,769
10
104
133

answered Aug 09 '11 at 12:01

Prince

863
1
8
7

$("#data option[value='" + valArr[i] + "']").attr("selected", 1); Just that part for mu purposes. Thanks guys. – Faiyet Jan 30 '13 at 17:15
multiselect() is not defined anywhere in JQuery documentation? http://api.jquery.com/?s=multiselect – HoldOffHunger Nov 22 '17 at 18:11
Refresh didn't work for me. If you have the same problem try reload instead. – Deathstalker Sep 19 '19 at 18:43
1

I referred your solution, this worked for me `$('#multiSelect').val(valueToBeSet).multiselect('refresh');` – K. Shaikh Jul 21 '20 at 07:28
1

@K.Shaikh thank you so much this is the only thing that has worked for me! – demo7up Dec 21 '22 at 02:58

score 20 · Answer 3 · answered Jun 14 '16 at 02:30

20

It's supposed to be as simple as this:

<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>

Check my Fiddle: https://jsfiddle.net/luthrayatin/jaLygLzo/

answered Jun 14 '16 at 02:30

Yatin

1,178
11
15

Yes! So elegant! – Marcelo Sader Dec 24 '17 at 21:21

score 10 · Answer 4 · answered Aug 06 '11 at 11:04

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);
}

Here is a demo

score 5 · Answer 5 · answered Jan 25 '17 at 14:16

5

work fine for me ,change ids according to you requirement.

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

answered Jan 25 '17 at 14:16

Basant Rules

785
11
8

In my case it was much simpler: `$("#listContent").val(4001);` Thks – dixoen Mar 27 '19 at 20:15

score 4 · Answer 6 · answered Mar 31 '15 at 23:08

from a php array into the 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

// then in the JS script

$("#multiselectbox").val(<?php echo $javascript_str; ?>);

// Then refresh

$("#multiselectbox").multiselect("refresh");

score 4 · Answer 7 · answered Aug 06 '11 at 11:00

4

that code should help:

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);
}

answered Aug 06 '11 at 11:00

zb'

8,071
4
41
68

Anubhav Trivedi · Answer 8 · 2013-02-14T11:52:34.680

3

 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();

   });

This selects the options whose value matches with values in array.

edited Feb 14 '13 at 11:52

answered Feb 14 '13 at 11:23

Anubhav Trivedi

1,130
1
12
19

vientoho · Answer 9 · 2016-03-21T08:37:29.127

The official site has mentioned (in "Manually check or uncheck a checkbox?" section) just to use click()

e.g.

$("#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

OR by 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>

score 2 · Answer 10 · edited Jul 24 '17 at 04:04

2

I got a better solution from jquery-multiselect documentation.

var data = [101,102];

$("#data").multiSelect('deselect_all');

$("#data").multiSelect("select",data);

edited Jul 24 '17 at 04:04

Joshua Baboo

525
1
4
17

answered Apr 19 '17 at 12:53

Sree

21
2

this and Basant answer below works, but behave a bit different, test them and choose which behaviour suite your UI – kite May 24 '18 at 17:54

score 0 · Answer 11 · edited May 09 '13 at 06:46

0

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

edited May 09 '13 at 06:46

Ankur

5,086
19
37
62

answered May 09 '13 at 06:28

amit kate

120
3

score 0 · Answer 12 · answered Jan 15 '14 at 11:27

this is my code sample. I have comma separated numbers for multi select drop down and want to select options multiple options from comma separated values.

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);
        }
    }
});

score 0 · Answer 13 · answered Jan 23 '14 at 19:31

This is what worked from me using an array as input. First uncheck all options, then click on the chosen options using 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();
}

score 0 · Answer 14 · edited Oct 21 '15 at 20:01

0

I ended up having to make a slight change using the click event on the input element by also setting the checked prop after firing the click event.

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

edited Oct 21 '15 at 20:01

marian0

3,336
3
27
37

answered Oct 21 '15 at 19:47

Adam

1
1

score 0 · Answer 15 · answered Nov 06 '18 at 12:33

I hope these functions will help you.

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

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

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

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

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

Reference by this site Reference

score 0 · Answer 16 · answered Dec 25 '20 at 07:58

0

Selects an option by its value. Works also using an array of values. Find complete details http://davidstutz.github.io/bootstrap-multiselect/#methods

$('#example-select').multiselect('select', ['1', '2', '4']);

answered Dec 25 '20 at 07:58

Yawar Ali

239
3
4

score -3 · Answer 17 · edited Nov 26 '16 at 08:13

-3

You can try this:

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

edited Nov 26 '16 at 08:13

gofr1

15,741
11
42
52

answered Nov 26 '16 at 08:07

aatish

7
1

2

That is correct, but this clearly looks like you copied Yatin's answer. – HoldOffHunger Nov 22 '17 at 18:14

JQuery Bootstrap Multiselect plugin - Set a value as selected in the multiselect dropdown

17 Answers17

Linked

Related