在动态加载的外部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

回答

相关问题