JQuery multiselect - Set a value as selected in th

Question

I am having a multiselect dropdown 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.

Answer 1

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

Answer 2

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

Answer 3

I got a better solution from jquery-multiselect documentation.

var data = [101,102];

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

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

Answer 4

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>