Search code examples
phpjquerybootstrap-multiselect

jquery check specific options in a multiselect


Alright I have a multiselect like this :

<select id="filtreMultiselectModif" name="groupes[]" multiple="multiple">

<script> 
$('#filtreMultiselectModif').multiselect(
    {
        includeSelectAllOption: true,
        enableFiltering: true,
        maxHeight: 200
    });
</script>

which give me that :

enter image description here

What I would like to do is to set checked some specific items that I store in a PHP table.

Here's my jquery code (that didn't work)

<script>
$(document).ready(function ()
{
    var arrayFromPHP = <?php echo json_encode($tableauIntitule); ?>;
    $('#filtreMultiselectModif').multiselect(
    {
        includeSelectAllOption: true,
        enableFiltering: true,
        maxHeight: 200
    });

    $('#filtreMultiselectModif option').each(function(i,option)
            {       
                $.each(arrayFromPHP,function(index,groupe){
                     if ($(option).text() === groupe) 
            {
                alert (option.text);
                 $(this).attr('checked', 'checked');
            }
                });
            });
});

Basicly I want every item stored in arrayFromPHP to be checked in the dropdown list but it doesn't seem to work..

Here's the code for my PHP array just in case :

<?php
$tableauIntitule = [];
$i = 0;
while ($data3 = mysqli_fetch_array($req3)) { // Remplissage du SELECT
  $intitule = $data3['intitule'];
  $tableauIntitule[$i] = $intitule;
}
?>

Solution

  • First of all - your question is regarding bootstrap-multiselect (and not jquery-multiselect).

    You can use the multiselect('select', VALUES) in order to set the selected values.

    Here is an example:

     $(document).ready(function() {
       $('#s1').multiselect();
       $('#s1').multiselect('select', ['a', 'c', '2']);
     });
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.min.js"></script>
    <select id="s1" multiple="multiple">
        <option value="a">Option A</option>
        <option value="b">Option B</option>
        <option value="c">Option C</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>

    In your case, if arrayFromPHP is an array (ie arrayFromPHP = ['v1', 'v2', 'v3']) you can do multiselect('select', arrayFromPHP).

    One important thing to remember - the data in the array should be the values and not the options data (<option value="VAL">OPTION</option>).