Bootstrap Selectpicker problems

Question

I'm trying to use this selectpicker for form selects and options, but can't get it to work.

I've added the following scripts and css as specified:

 <script type="text/javascript"> $('.selectpicker').selectpicker({ }); </script> <script src="/js/Bootstrap/Select/bootstrap-select.js"></script>

html for the 1st greyed out select in the search bar:

<select class="selectpicker" id="searchType" name="searchtype" onchange="this.form.submit()"> <option value="All">All</option> <option value="Businesses">Businesses</option> <option value="Events">Events</option> <option value="News">News</option> <option value="Lifestyle">Lifestyle</option> </select>

Any ideas appreciated.

tejashsoni111 · Accepted Answer · 2014-06-04 10:25:57Z

7

Please be sure that you included all the required files or You may have to rearrange the code like :

<script src="/js/Bootstrap/Select/bootstrap-select.js"></script> <script type="text/javascript"> $('.selectpicker').selectpicker({ }); </script>

You need to include the js first then call the the plugin. Check this fiddle, its working for me : http://jsfiddle.net/tejashsoni111/RUAS4/

answered Jun 4, 2014 at 10:25

tejashsoni111

1,4051 gold badge18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tejashsoni111 Over a year ago

Its the bootstrap's default css applied on it, you need to overwrite or customize the css as per your requirement. For example, if you see in the fiddle, there is an option for style: 'btn-info', in this option you can add your own style class.

dreamweiver Over a year ago

the blue color is coming up because the select pickers style has been set to style: 'btn-info',`, hence bootstrap css is adding the blue color to it thinking it as info button. just remove that,check here i have modified, jsfiddle.net/dreamweiver/RUAS4/1

dreamweiver Over a year ago

@uname12: with this attitude you wont find an answer bro , your on your own now.

dreamweiver · Accepted Answer · 2014-06-04 10:51:50Z

.selectpicker() is a function defined under bootstrap-select lib and not in core bootstrap library,hence you need to include that library as well

//silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js

//silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css

HTML:

 <select class="selectpicker" id="searchType" name="searchtype" onchange="this.form.submit()"> <option value="All">All</option> <option value="Businesses">Businesses</option> <option value="Events">Events</option> <option value="News">News</option> <option value="Lifestyle">Lifestyle</option> </select>

JQUERY CODE:

$('.selectpicker').selectpicker();

Here is a Live Demo of select picker function :

http://jsfiddle.net/dreamweiver/2a9xp/13/

Happy Coding :)

@uname12: if its still not working then check on console if there is any error also check if all the necessary libraries are loaded or not

Conor · Accepted Answer · 2016-05-23 11:32:49Z

In case anyone using Rails is experiencing a similar problem - the issue was arising from the existence of the precompiled assets for the AWS deployment that were lingering in my local environment.

Deleting YourRailsApp/public/assets solved the issue for me.

Collectives™ on Stack Overflow

Bootstrap Selectpicker problems

3 Answers 3

3 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Related