jQuery多选重新加载。

Question

如何向JQuery UI Multiselect添加或删除选项？我在页面加载时初始化多选框，需要根据另一个选择删除现有值并添加新值。我使用以下方式在页面加载时初始化多选框：

$("#multipleselectboxId").multiselect();

之后，我使用jQuery的append()和remove()方法向多个下拉列表添加值。在原始下拉列表中，这些方法正常工作，但在多选框中未能反映出来。请问有人可以帮忙吗？

- Robin Michael Poothurai

Answer 1

对于这个问题，您可以在更改后销毁并重新初始化...

$("#multipleselectboxId").append(toAppend).multiselect("destroy").multiselect();

还有另一个带有刷新功能的插件：EricHynds's Multiselect

$("#multipleselectboxId").append(toAppend).multiselect("refresh");

- Brandon Joyce

---

不行。我已经尝试过了，它不起作用，你提到的插件与我使用的不同，我是从这个链接http://quasipartikel.at/multiselect_original/使用的。 - Robin Michael Poothurai

啊，如果其他方法都不行，你能销毁它然后重新初始化吗？看起来它正在使用小部件工厂，所以应该是可以的。 - Brandon Joyce

我遇到了异常Uncaught TypeError: $(...).multiselect is not a function.. 不知道为什么我需要使用大写字母，这样才能正常工作，例如$("#multipleselectboxId").multiSelect();. 我正在使用默认的 jQuery UI 多选框。 - Mira Nedved

Answer 2

我找到了解决方案，首先销毁多选框并重新初始化它，感谢@ Brandon Joyce的帮助。

解决方案如下：

$("#multipleselectboxId").append(toAppend);
$("#multipleselectboxId").remove(toRemove);

$("#multipleselectboxId").multiselect('destroy');
$("#multipleselectboxId").multiselect();

- Robin Michael Poothurai

---

这个答案让我感到困惑。你能解释一下你解决方案的前两行是什么意思，以及它们与重新加载有什么关系吗？ - IcedDante

请问，您确定不应该接受@Brandon Joyce的答案作为第一个正确的答案吗？！ - Hamid Reza

正是我正在寻找的！！在初始化多选之前使用“destroy”解决了我的问题！谢谢！ - AxleWack

Answer 3

在我的情况下，我只想用新的替换所有以前的多选内容。

这对我有用：

```html

This worked for me:

```

$('#multiselect_id').html(newHtml);
$('#multiselect_id').multiselect('refresh');

- user2139254

Answer 4

我曾尝试通过使用.multiselect("destroy")和.multiselect()来重建多选框，但是它没有起作用，最终我找到了这个解决方案。

$.each(jsonArray, function(i, val) {
    $('#frmarticles-f_category_id').append('<option value="'+i+'">'+val+'</option>').multiselect('rebuild');
});

- Andrej Gaspar

Answer 5

以下是我的操作步骤：可能比必要的要多，但对我有效。

需要修改的原始“select”代码：

<select id="MySelect" name="selection">
<option value="1">One</option>
<option value="2">Two</option>
</select>

我使用PHP重建选项列表，通过JSON将其发送到JavaScript，并在变量中构建/存储新列表。例如：

// this is similar to if we got it from PHP
var newList = '<option value="A">Alpha</option>
<option value="B">Beta</option>
<option value="C">Gamma</option>';

现在，要在jQuery UI Multiselect小部件中切换它：

$('#MySelect').html(''); // clear out old list
$('#MySelect').multiselect('destroy');  // tell widget to clear itself
$('#MySelect').html(newList); // add in the new list
$('#MySelect').multiselect(); // re-initialize the widget

特别地，我使用参数重新初始化了它，例如：

$('#MySelect').multiselect({selectedList: 4, header: false});

如果有人已经读到这里，但仍然遇到问题，请尝试以下方法。

- UncaAlby

Answer 6

谢谢，这很有帮助。我正在使用多选 UI 小部件，这是有效的解决方法。

jQuery("select[title='" + FieldNameTitleText + "']").append( "<option value='" + OptionValue+ "'>" + OptionText + "</option>" ).multiselect("refresh");

- Vinit

---

使用“append()”后是否链接，使用“refresh”都可以正常工作。谢谢。 - caglaror

Answer 7

这个插件很好用，但是我在销毁和过滤方面遇到了问题：我的组合数据是通过ajax加载的。因此，当我使用ajax调用刷新数据时，我会调用destroy来刷新插件：

myCombo.multiselect('destroy');
myCombo.multiselect().multiselectfilter();

它可以在第一次调用时工作：空的组合框，ajax调用以加载数据，调用上面的函数。 但是如果我刷新组合框数据并再次调用上述函数，过滤器会消失？ 有人之前遇到过这个问题并找到了解决方案吗？

- Yoong Kim

Answer 8

对于 wenzhixin MultiSelect：

var i = jQuery('input');
i.data('multipleSelect').$parent.remove();
i.removeData('multipleSelect');
i.show();

- Mykola Mykolayovich Dolynskyi

Answer 9

我也遇到了同样的问题，但最终我解决了。请使用$(selecter).multiselect("refresh");而不是$(selecter).multiselect("reload")；

- Khadeer Mohammed

Answer 10

var valArr = ["1", "2"],
         i = 0,
      size = valArr.length,
  $options = $('#MySelect option');

for (i; i < size; i++) {
  $options.filter('[value="' + valArr[i] + '"]').prop('selected', true);
}

$('#MySelect').multiselect('reload');

1. valArr 是 select 选项的值
2. 使用 for 循环根据 valArr 设置匹配选项的 selected 属性
3. 我们的更改仅在隐藏的 select 元素中进行
4. 要更改多选生成的元素，我们需要重新加载
5. 每个插件可能有不同的名称来重新加载，例如：update、refresh。

- ramesh singer

---

不要只是发布代码作为答案。请稍微解释一下。 - JP Hellemons