DeveloppeurDuTurfu DeveloppeurDuTurfu - 4 months ago 31
PHP Question

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

Answer

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

Comments