在选择

Question

在附带的小提琴中，当选择的选择加载时，我有两个选项预先填充“丹麦”和“法国”。如果我在选择框中选择更多值并单击清除按钮，我希望使用相同的预填充值“丹麦”和“法国”恢复所选的选择。

我想更改此代码以预填充所选值。

$("#Clear").click(function () {
    $('.chosen-select option').prop('selected', false).trigger('chosen:updated');
});

JSFiddle

更新： 如果有一种方式可以预先填充哪些选项并不重要，那将是非常好的，但是如果有的话，它们应该被恢复。

Answer 1

放手一搏

$("#countries").chosen();

$("#Clear").click(function () {
    $('.chosen-select option').prop('selected', false);
    $('.chosen-select').val(['Denmark', 'France']).trigger('chosen:updated');
});

http://jsfiddle.net/y5cnd018/

Answer 2

您需要创建一个预选选项值的数组。然后，您可以对此数组使用forEach循环来更改selected的值，并在触发更新之前获取初始状态。

$("#countries").chosen();

let preselected = [];

$('[selected]').each((i, node) =>{
  preselected.push($(node).attr('value'));
});

$("#Clear").click(function () {
    $('.chosen-select option').prop('selected', false);

    preselected.forEach(pre => {
      $(".chosen-select option[value='" + pre + "']")
      .attr('selected', 'selected')
      .trigger('chosen:updated');
    });
});

Fiddle

正如您所看到的here，您可以使用插件中的任何内容来实现此目的，您似乎必须通过更改DOM并触发更新来实现。我会使用来自luckyape的代码和我的混合代码。