引導選擇不顯示項目

我想在我的python燒瓶網頁中使用bootstrap-select。以下是我目前擁有的代碼。引導選擇不顯示項目

<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>

雖然選擇作品的數據實時搜索，但選擇不顯示除選定的項目以外的任何項目。

我甚至刷新$(document).ready()。我究竟做錯了什麼？

來源

2017-08-14 RoshanaSheri

控制檯中的任何錯誤？ –

爲什麼你的應用程序中有兩個準備好的事件？ –

sry阿米特，我應該刪除標題內的一個。現在編輯 – RoshanaSheri

下面的HTML工作正常，您的html中缺少SECTION結束/關閉，請刪除document.ready的腳本。請參閱下面的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 and minified CSS --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> 

<!-- Latest compiled and 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>

來源

2017-08-14 15:10:01

謝謝你阿米特:) – RoshanaSheri

任何原因的投票在這裏？ –

嘿，我檢查它不是我，即使我upvote它變爲0.當我刪除upvote它-1（ – RoshanaSheri

靠近標記之前移動的js文件和<script>，底：

<body> 
<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> 

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

}）;

來源

2017-08-14 14:50:14

你能提出這種改變如何解決問題嗎？ –

@Melik，它沒有幫助 – RoshanaSheri

他需要調整選擇按鈕的默認大小，我想這將解決問題 –

引導選擇不顯示項目

回答

相關問題