在動態加載的外部html組件上應用select2

當加載一個頁面時，它會加載另一個html頁面，並且html頁面包含select，我想在其上應用select2。在動態加載的外部html組件上應用select2

非常基本的頁面包含

<select class="selectAddItem" id="selectAddItem" name="selectAddItem" style="width: 150px;" class="required"> 
    <option value="">--- Please Select---</option> 
    <option value="1">Movie</option> 
    <option value="2">Actor or Actress</option> 
</select> 
<div class="well" id="well"></div>

，當我選擇一個項目，它由

$(document).on('change','#selectAddItem',function(){ 
    if(this.value==1) { 
    $("#well").load("/showAddMovie"); 
    } else { 
    $("#well").load("/showAddActor"); 
    } 
    $.getScript("../static/js/select2.min.js"); 
    $.getScript("../static/js/additem.js"); 
    $(".js-example-basic-multiple").select2({ 
     width: "80%", 
     tags: true 
    });; 
});

的showAddMovie內加載外部HTML頁面加載包含選擇HTML頁面，我想在加載的頁面上應用select 2。外部html包含如下所示的內容。

<select class="js-example-basic-multiple" multiple="multiple"> 
    <option value="AL">Alabama</option> 
    <option value="Am">Amalapuram</option> 
    <option value="An">Anakapalli</option> 
    <option value="Ak">Akkayapalem</option> 
    <option value="WY">Wyoming</option> 
</select>

但是，select2沒有應用在我的代碼中。任何想法？謝謝。

來源

2017-06-04 Hangil Kang

'.load'和'.getScript'都是異步的，當你調用'.select2（）'之前，你都需要一個回調函數。我將使用'.load'的成功函數，並刪除select2的延遲加載，並將其作爲標準包含直接放在頁面中。 – MrCode

此調用Ajax調用$("#well").load("/showAddMovie");

您需要在第二個參數指定的回調函數，這樣一旦數據被加載，那麼你做的回調函數內進一步處理。 $("#well").load("/showAddMovie", function(responseTxt, statusTxt, xhr){ if(statusTxt == "success") console.log("loaded successfully!"); if(statusTxt == "error") console.log("Error: " + xhr.status + ": " + xhr.statusText); });

此外，通過MrCode作爲建議$.getScript也是異步調用，您可能需要使用$.when到異步調用結合起來，做一次處理所有的呼叫都解決了。

來源

2017-06-04 13:40:31

在動態加載的外部html組件上應用select2

回答

相關問題