编程选择select2,它通过Ajax检索其数据
我正在使用select2版本4.0,我正在尝试对选择框进行编程选择,该框从ajax调用获取其数据。
在文档中,我找到了如何以编程方式将值设置为常规select2,但我无法弄清楚如何使用ajax select来执行此操作。
如果我没记错的话,在旧版本中,您可以通过使用以下命令将数据传递给select2来设置当前值:
jQuery("selectbox").select2("data", data)
我试过这个,并发送了一个带有,id,text和result的数据对象,但没有任何可见的事情发生,当我查询选择框的状态时,为了查看所选的值,它返回null。
此选项已删除,或只是更改? 我在哪里可以在文档中找到它,或者我怎样才能实现所需的行为?
实现此目的的唯一方法是首先使用您要选择的数据向选择dom添加 ,然后选择它,就像使用常规选择框一样。 这也是kevin-brown在他们的github项目页面上的正式答案。
https://github.com/select2/select2/issues/3273
所以,基本上,如果你知道你想要选择什么,你可以轻松地从它创建一个元素,将它添加到原始选择框,然后按它的值选择它:
var option=jQuery("
我也想知道对此的完整答案,但这是一个部分解决方案:
$('#select2-control-id').val('item-id').trigger('select2:select').trigger('change');
这似乎只有在select2
已经加载了你要求的项目时才有效 – 也就是说你已经点击了它。
您不仅必须手动打开下拉列表,还要通过AJAX加载第一页项目 – 您还必须实际点击要稍后以编程方式选择的项目。
这似乎是因为它只在您实际点击它们时将
添加到基础select
元素。
我无法通过编程方式告诉select2
加载AJAX结果的第一页。
操作隐藏的框很容易:
//set first option as selected $("select [value='0']").attr("selected","selected"); $("select").trigger("change");
演示
你可以试试这个。
var dataString = 'id='+$value; var promise = sendAjaxFunction('load_form.php?k=1',dataString); $("#LoadMachine").html(""); promise.success(function (data) { $("#LoadMachine").html(data); $("#MachineName").select2({ placeholder: 'Select Operation Name ...', allowClear: true }); return false; });
将数据加载到Div #LoadMachine中,结果您可以加载select2。