引導選擇與阿賈克斯jquery不工作

我使用bootstrap-select和一切工作正常，直到我的選擇標記的選項充滿了來自php文件的數據。我已經看過關於這個話題的每篇文章，但是沒有答案。所以這裏有一個例子：風格：引導選擇與阿賈克斯jquery不工作

<link rel="stylesheet" href="dist/css/bootstrap-select.css"><!-- This is from my path--> 

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

HTML：

<!-- This is working --> 
<div class="players col col-lg-3"> 
    <label for='selectPlayer'> Pick the Player: </label> 
    <select class='selectpicker' data-style='btn-info'> 
     <optgroup id="opt" label='Players'> 
      <option>Ronaldo</option> 
     </optgroup> 
    </select> 
</div> <!-- Select Player --> 

<!-- This is not working,when using ajax jquery --> 
<label for='selectClub'> Tested ajax jquery : </label> 
<div id="players1" class="players1" data-container="body"></div> <!-- Jquery-->

腳本：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 

<script src="dist/js/bootstrap-select.js"></script> <!-- This is from my path,and must be at the end--> 

<script> 
/* ---------- References ---------- */ 
// http://stackoverflow.com/questions/15726411/how-to-use-bootstrap-select 
// http://stackoverflow.com/questions/5807565/return-value-from-ajax-call-is-not-shown-in-the-page-source 
$(document).ready(function() { 
$.ajax({ 
     type:"GET", 
     url:'selectPHP.php', 
     data:{}, 
     success: function (response) { 
      alert(response); 
      $('#players1').html(response); 
      console.log((response)); 
     }, 
     error: function() { 
      $('#players1').html('There was an error!'); 
     } 
    }); 

    $('.selectpicker').selectpicker({ 
     style: 'btn-primary', 
     size: 2 
    }); 
}); 
</script>

php文件：

echo "<select class='selectpicker' data-style='btn-primary'>"; 
echo "<option> data 1 </option>"; 
echo " </select><!-- select -->";

我收到了數據使用ajax，但這些數據不會顯示在頁面上。例如我使用了bootstrap-table，它正在工作，但不是在bootstrap-select的情況下。你有關於這個話題的提示嗎？

問候

來源

2015-08-28 Anel

你需要你從Ajax調用順利拿到結果後，初始化selectpicker：

$(document).ready(function() { 
    $.ajax({ 
     type: "GET", 
     url: 'selectPHP.php', 
     data: {}, 
     success: function (response) { 
      alert(response); 
      $('#players1').html(response); 
      console.log((response)); 
      $('.selectpicker').selectpicker({ 
       style: 'btn-primary', 
       size: 2 
      }); 
     }, 
     error: function() { 
      $('#players1').html('There was an error!'); 
     } 
    }); 
});

來源

2015-08-28 17:47:44 Chitrang

好吧，它的工作。多謝，夥計。 – Anel

從Ajax獲取數據後會發生什麼？它是否顯示「players1」div內的任何「select」元素？控制檯中是否有錯誤？ – Chitrang

不，不，現在很好，但你能解釋一下爲什麼初始化需要在Ajax調用中，最後是你的情況嗎？我也在ajax調用後初始化（邏輯：我會有innerhtml，之後我會初始化.selectpicker）。在你的情況下邏輯是一樣的，但它在ajax塊內。有什麼不同？ – Anel

或者這將幫助：

$('.selectpicker').selectpicker({ // your custom styles});

在AJAX頁面結束（selectPHP.php）。

來源

2016-01-15 13:39:04 rahul

引導選擇與阿賈克斯jquery不工作

回答

相關問題