在jQuery的多选下拉列表中动态添加内容 [英] Dynamically add content in the multiselect dropdown in jquery

问题描述

我对带有复选框的下拉列表中的多项选择有疑问.每当我在jquery中上传图片时，我都希望在下拉列表中动态添加内容.如何使用新数据刷新下拉列表?

I have some doubt on multiple select in dropdown with checkbox. i want to dynamically add the content in drop down whenever i upload a image in jquery.How to refresh dropdown with new data?

$('#listImage').multiselect({});

一旦我获得了新的数据，我试图刷新多选，但会引发错误.

once i get the new data i tried to refresh the multiselect but that throws error.

 $("#widgetSettingsForm select[multiple]").multiselect('rebuild');

未捕获的错误:没有针对多选窗口小部件实例的此类方法重建"(...)

Uncaught Error: no such method 'rebuild' for multiselect widget instance(...)

推荐答案

使用刷新代替重建: http://jsfiddle.net/o7xf9awv/1/

$("#test001").multiselect('refresh');

$("#test001").multiselect({
  header: false,
  noneSelectedText: "Select"
});
var count = 2;
$("#add").click(function() {
  $("#test001").append('<option value="option5">Option ' + ++count + '</option>');
  $("#test001").multiselect('refresh');
});

$("#remove").click(function() {
  $("#test001 option:last").remove();
  $("#test001").multiselect('refresh');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/1.10/src/jquery.multiselect.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/themes/redmond/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="https://raw.githubusercontent.com/ehynds/jquery-ui-multiselect-widget/1.10/jquery.multiselect.css">
<input type="button" id="add" value="add" />
<input type="button" id="remove" value="remove last" />
<br/>
<select id="test001" multiple="multiple">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

这篇关于在jQuery的多选下拉列表中动态添加内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！