Bootstrap Selectpicker Not Working

Question

I am using bootstrap-select from http://silviomoreto.github.io/bootstrap-select/.

I am using the code in Prestashop as country selector as follows;

{elseif $field_name eq "country" || $field_name eq "Country:name"}
                <p class="required select">
                    <div class="form-group"><label for="id_country" class="col-lg-2 col-md-2 col-sm-2 control-label">{l s='Country'} <sup>*</sup></label>
                    <div class="col-lg-10 col-md-10 col-sm-10"><select name="id_country" id="id_country" class="selectpicker">
                        {foreach from=$countries item=v}
                        <option value="{$v.id_country}"{if (isset($guestInformations) AND $guestInformations.id_country == $v.id_country) OR (!isset($guestInformations) && $sl_country == $v.id_country)} selected="selected"{/if}>{$v.name|escape:'htmlall':'UTF-8'}</option>
                        {/foreach}
                    </select></div></div>
                </p>

This is the original.

{elseif $field_name eq "country" || $field_name eq "Country:name"}
                <p class="required select">
                    <label for="id_country">{l s='Country'} <sup>*</sup></label>
                    <select name="id_country" id="id_country">
                        {foreach from=$countries item=v}
                        <option value="{$v.id_country}"{if (isset($guestInformations) AND $guestInformations.id_country == $v.id_country) OR (!isset($guestInformations) && $sl_country == $v.id_country)} selected="selected"{/if}>{$v.name|escape:'htmlall':'UTF-8'}</option>
                        {/foreach}
                    </select>
                </p>

I am trying to figure out why Bootstrap select is giving me an error..maybe the option value isn't being passed on? Anyone used Bootstrap select and had a similar problem? It has been working for everything else for me.

Thanks in advance! Carl

What error are you getting? I am using the bootstap select with ASP.NET though. Perhaps I can help. — RealSollyM, Feb 05 '14 at 13:18

score 1 · Answer 1 · answered Sep 08 '14 at 05:41

Try the following, it worked for me after thousands of trials and errors.

First of all, you should link the following scripts in your tag:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type='text/javascript' src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://www.bootply.com/plugins/bootstrap-select.min.js"></script>

Then you have to give your tag an id, as follows:

<select id="combo1" class="selectpicker" data-style="btn-danger">
<option data-hidden="true">Choose Option</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>

Then again another script to initiate this selectpicker above:

<script>
$(document).ready(function() {
        $("#combo1").selectpicker ({});    
    }); </script>

score 0 · Answer 2 · answered May 19 '15 at 10:53

The problem is the label tag.

I can not get it to work with the label tag ...

I don't know why :(

echo "<td>
        <label for='".$value1['id_news']."_Cat'>Catégorie</label>
        <select id='".$value1['id_news']."_Cat' name='".$value1['id_news']."_Cat' class='selectpicker' data-width='150px'>
            <option value='0'>G&eacute;n&eacute;ral</option>";

            // Affiche toutes les catégories
            foreach($aCat as $sCat) {
                echo "<option value='".$sCat['cat_id']."'>".$sCat['cat_nom_fr']."</option>";
            }

echo "</select>
    </td>

Bootstrap Selectpicker Not Working

2 Answers2