Question

我正在尝试创建一个简单的弹出框，其中包含一个加载了ajax的select2元素......但是当我把它放进去时，select2在colorbox中是不可见的......

var wrapper = $("<div/>");
var a = $('<input type="hidden" id="e6" style="width:200px" value="16340"/>');
a.select2({
    placeholder: "Search for a movie",
    minimumInputLength: 1,
    ajax: {
        url: "ajax.php",
        dataType: 'json',
        data: function(term, page) {
            return {
                city: term,
                type: 'name'
            };
        },
        results: function(data, page) {
            return {
                results: data
            };
        }
    },
    initSelection: function(element, callback) {},
});
wrapper.append(a);
$.colorbox({
    rel: 'group2',
    html: wrapper,
    width: '40%',
    height: '40%'
});

Answer 1

这是因为在元素实际添加到DOM之前，您在a元素上运行select2。您需要先添加它，然后在DOM中运行select2。

您可以使用颜色框完成加载时运行的回调来执行此操作：

var wrapper = $("<div/>");
var a = $('<input type="hidden" id="e6" style="width:200px" value="16340"/>');

wrapper.append(a);

$.colorbox({
  rel: 'group2',
  html: wrapper,
  width: '40%',
  height: '40%'
});

$(document).bind('cbox_complete', function() {
  $('a').select2({
    placeholder: "Search for a movie",
    minimumInputLength: 1,
    ajax: {
      url: "ajax.php",
      dataType: 'json',
      data: function(term, page) {
        return {
          city: term,
          type: 'name'
        };
      },
      results: function(data, page) {
        return {
          results: data
        };
      }
    },
    initSelection: function(element, callback) {

    },

  });
});

jquery select2对我不起作用

1 个答案: