在动态加载的外部html组件上应用select2

时间:2017-06-04 13:15:43

标签: javascript jquery ajax jquery-select2

加载页面时,它会在其中加载另一个html页面,而html页面包含select,我想在其上应用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>

当我选择一个项目时,它会通过

加载一个外部html页面
$(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将加载包含select的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。任何的想法?感谢。

1 个答案:

答案 0 :(得分:0)

此调用是ajax调用Unable to locate credentials. You can configure credentials by running "aws configure".

您需要在第二个参数中指定回调函数,以便在加载数据后再在回调函数内进行进一步处理。 $("#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来组合异步调用,并在解析所有调用后进行处理。

相关问题