I’m trying to make the same style than on their doc : https://silviomoreto.github.io/bootstrap-select/examples/

But this is what I have :

I don’t know why, because I inlcluded all JS and CSS files !

I’m working with WordPress 4.7.5

This is my HTML :

<form class="form_search_order form-planning" name="form_search_client">

        <!-- Chauffeur -->
        <select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple>
            <option value="" selected>Conducteur de travaux</option>
            <?php foreach ($chauffeurs->posts as $key => $name_chauffeur) { ?>
                <option
                    value="<?php echo $name_chauffeur->ID; ?>"><?php echo $name_chauffeur->post_title; ?></option>
            <?php } ?>
        </select>

        <!-- Client -->
        <select type="search" name="client_name[]" class="select-client selectpicker" multiple>
            <option value="" selected>Nom du chantier</option>
            <?php foreach ($list_client as $key => $name) { ?>
                <option value="<?php echo $name; ?>"><?php echo $name; ?></option>
            <?php } ?>
        </select>

        <!-- Semaine -->
        <select name="semaine[]" id="semaine" class="select-semaine selectpicker" multiple>
            <option value="" selected>Semaine</option>
            <?php foreach ($semaines->posts as $key => $semaine) { ?>
                <option value="<?php echo $semaine->ID; ?>"><?php echo $semaine->post_title; ?></option>
            <?php } ?>
        </select>

        <button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button>
    </form>

And in my footer :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
                <!-- Latest compiled and minified JavaScript -->
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
                <script src="/Prefinelec1/wp-content/themes/Divi-child/js/script.js"></script>

My CSS :

.form-planning{
width:80%;
max-width: 1080px;
margin: auto;
margin-right: 10px;
vertical-align: middle;

select{
  font-size: 14px;
  margin-right: 10px;
  width: (14%-10px);
  border-radius: 0;

  &.select-chauffeur{
    min-width: 150px;
  }

  &.select-client{
    min-width: 120px;
  }

  &.select-semaine{
    min-width: 90px;
    margin-right: 0;
  }
 }

.inp-submit-form-planning{
  font-size: 14px;
  color: white;
  background: $bleu;
  border: solid 2px white;
  padding: 4px 9px;

  &:hover{
    color: $bleu;
    background: white;
    cursor: pointer;
    transition: 0.6s;
    }
  }
}

I also add this :

`$(document).ready(function(){
   $('.selectpicker').multiselect();
});`


  [1]: https://i.stack.imgur.com/RwNuB.png

Read more here: Bootstrap selectpicker multiple is not working


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: