javascript - Choices-js 在选择中保留选项

Question

我正在使用 Choices.js创建一个多选选项菜单。
在 <select>菜单需要能够选择相同的<option>多次。
此问题已通过使用 addEventListener 得到解决Choices.js 中的函数。
问题
当我想从 加载选定的选项时字符串或ajax 调用<option>只选择一次而不是多次。
例如:值 1 - 1 - 2 - 3 - 3将需要显示在 <select>菜单 ONE - ONE - TWO - THREE - THREE .
但现在我只显示ONE - TWO - THREE .
问题是 addEventListener setChoiceByValue 时不工作正在使用。

document.addEventListener("DOMContentLoaded", function() {
  const query_task = new Choices(document.querySelector('#query_task'), {
    removeItemButton: true,
    maxItemCount: 10,
  });
  query_task.passedElement.element.addEventListener('addItem', function(e) {
    query_task.setChoices([{
      value: e.detail.value,
      label: e.detail.label
    }, ], 'value', 'label', false, );
  }, false, );

  $(document).on('click', '.ajax_data', function() {
    let data = '1,1,2,3,3';
    query_task.removeActiveItems();
    query_task.setChoiceByValue(data.split(','));
    console.log('Ajax data loaded');
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://choices-js.github.io/Choices/assets/styles/choices.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/9.1.0/choices.min.js"></script>

<div class="row pt-2 px-5">
    <div class="col-12 px-5">
        <label for="query_task" class="form-label">SELECT TASKS</label>
        <select id="query_task" class="form-control choices-multiple" multiple>
            <option value="0">ZERO</option>
            <option value="1">ONE</option>
            <option value="2">TWO</option>
            <option value="3">THREE</option>
            <option value="4">FOUR</option>
        </select>
    <div>
    <div>
        <button type="button" class="ajax_data btn btn-primary">Load AJAX data</button>
    </div>
</div>

最终结果:

let query_data = [
  { value: "0", label: "ZERO" },
  { value: "1", label: "ONE" },
  { value: "2", label: "TWO" },
  { value: "3", label: "THREE" },
  { value: "4", label: "FOUR" }
];

document.addEventListener("DOMContentLoaded", function() {
  const query_task = new Choices(document.querySelector('#query_task'), {
    removeItemButton: true,
    maxItemCount: 10,
    choices: query_data
  });
  query_task.passedElement.element.addEventListener('addItem', () => reset(), false);
  query_task.passedElement.element.addEventListener('removeItem', () => reset(), false);

  function reset() {
    query_task.clearChoices();
    query_task.setChoices(query_data, "value", "label", false);
  }

  $(document).on('click', '.ajax_data', function() {
    query_task.removeActiveItems();
    let data = '1,1,2,3,3';
    let selected_values = data.split(',')
    $.each(selected_values, function(key, value) {
      query_task.setChoiceByValue(value);
      reset();
    });
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://choices-js.github.io/Choices/assets/styles/choices.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/9.1.0/choices.min.js"></script>

<div class="row pt-2 px-5">
  <div class="col-12 px-5">
    <label for="query_task" class="form-label">SELECT TASKS</label>
    <select id="query_task" class="form-control choices-multiple" multiple>
    </select>
    <div>
      <div>
        <button type="button" class="ajax_data btn btn-primary">Load AJAX data</button>
      </div>
    </div>

Answer 1

文档有点困惑😵。有两个问题需要解决:

要添加重复项，您需要使用 setValue(items)方法。下一点解释了如何去除重复。

取消选择一个项目后，它会重新添加到选项列表中。这会创建重复项。我找不到从选项列表中删除单个选项的方法。因此，作为一种解决方法，我正在重置整个选项列表。

演示:

let labels = ['ZERO', 'ONE', 'TWO', 'THREE', 'FOUR'];
let query_task = null;

document.addEventListener("DOMContentLoaded", function() {
  query_task = new Choices(document.querySelector('#query_task'), {
    removeItemButton: true,
    maxItemCount: 10,
    duplicateItemsAllowed: true,
    choices: defaults()
  });

  query_task.passedElement.element.addEventListener('addItem', function(e) {
    query_task.setChoices([{
      value: e.detail.value,
      label: e.detail.label
    }, ], 'value', 'label', false);
  }, false);

  query_task.passedElement.element.addEventListener('removeItem', () => reset(), false);

  $(document).on('click', '.ajax_data', function() {
    let data = '1,1,2,3,3';
    query_task.removeActiveItems();
    query_task.setValue(data.split(',').map((v) => ({value: v, label: labels[+v]})));

    reset();
    console.log('Ajax data loaded');
  });
});

function defaults() {
  return labels.map((lbl, i) => ({value: i, label: lbl}));
}

function reset() {
  query_task.clearChoices();
  query_task.setChoices(defaults(), 'value', 'label', false);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://choices-js.github.io/Choices/assets/styles/choices.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/choices.js/9.1.0/choices.min.js"></script>

<div class="row pt-2 px-5">
  <div class="col-12 px-5">
    <label for="query_task" class="form-label">SELECT TASKS</label>
    <select id="query_task" class="form-control choices-multiple" multiple></select>
    <div>
      <div>
        <button type="button" class="ajax_data btn btn-primary">Load AJAX data</button>
      </div>
    </div>
  </div>
</div>