Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Bootstrap-select?

I’m new to this. I’m trying the Bootstrap-select but I’m not getting the desired effect like here https://developer.snapappointments.com/bootstrap-select/. I have downloaded the files and pointed to the CSS and JS in the head. I have enabled Bootstrap-select via JavaScript in the head as well and still not working – I’m just getting the default appearance. Here is my complete code. What am I doing wrong here? Any tips will be appreciated.

<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<link href="bootstrap-master/docs/assets/css/bootstrap.css" rel="stylesheet" />
<link href="bootstrap-master/docs/assets/css/bootstrap-select.css" rel="stylesheet" />
<script src="bootstrap-master/docs/assets/js/bootstrap-select.js" type="text/javascript"></script>
<script>
$('.selectpicker').selectpicker({
      style: 'btn-info',
      size: 4
  });
</script>
</head>

<body>
<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>
</body>
</html>
like image 571
user2228523 Avatar asked Mar 31 '13 04:03

user2228523


1 Answers

$(document).ready(function() {
  $('.selectpicker').selectpicker({
    style: 'btn-info',
    size: 4
  });
});

Your script is declared and therefore executed before the <select class="selectpicker"> -declaration, causing bootstrap-select never being initialized opon .selectpicker (selectpicker doesnt exists when the script is runned). So put it in a document(ready) or after the HTML.

like image 84
davidkonrad Avatar answered Nov 02 '22 18:11

davidkonrad