jquery - bootstrap select not showing items -
i trying use bootstrap-select in python flask web page. following code have.
<head> <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css')}}" > <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-responsive.min.css')}}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/font-awesome.min.css')}}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css')}}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/sl-slide.css')}}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-select.min.css')}}"> <script src="{{ url_for('static', filename='js/jquery-3.2.1.min.js')}}" ></script> <script src="{{ url_for('static', filename='js/bootstrap.min.js')}}"></script> <script src="{{ url_for('static', filename='js/bootstrap-dropdown.js')}}" ></script> <script src="{{ url_for('static', filename='js/bootstrap-select.js')}}" ></script> </head> <body> <section id="about-us" class="container main"> <div class="row-fluid"> <div class="span8" > <div class="blog"> <div class="blog-item well"> <a href="#"><h2>heading2</h2></a> <select class="selectpicker" id="select_county" data-live-search="true" data-style="btn-primary"> <option>county1</option> <option>county2</option> </select> <select class="selectpicker" id="select_event" data-live-search="true" data-style="btn-primary"> <option>event1</option> <option>event2</option> </select> <input type="submit" class="btn btn-info" value="submit button"> </div> </div> </div> </div> <script type="text/javascript"> $(document).ready(function(){ $('.selectpicker').selectpicker('refresh'); }); </script> </body>
although data-live-search of select works, select not showing of items other selected one.
i refresh in $(document).ready()
. doing wrong?
below html working fine, section end/closing missing in html, kindly remove script of document.ready well. refer below html.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <!-- latest compiled , minified css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <!-- latest compiled , minified javascript --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script> </head> <body> <section id="about-us" class="container main"> <div class="row-fluid"> <div class="span8" > <div class="blog"> <div class="blog-item well"> <a href="#"><h2>heading2</h2></a> <select class="selectpicker" id="select_county" data-live-search="true" data-style="btn-primary"> <option>county1</option> <option>county2</option> </select> <select class="selectpicker" id="select_event" data-live-search="true" data-style="btn-primary"> <option>event1</option> <option>event2</option> </select> <input type="submit" class="btn btn-info" value="submit button"> </div> </div> </div> </div> </section> </body> </html>
Comments
Post a Comment