Question

我有一个可以多次选择的组合框。这是HTML。

<select multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

JS代码

$('select').select2();
$('select').change(function(){
    $("select").val([]); // clear selected value
});

我希望能够在同一选项上多次选择。例如，如果我选择1，那么我应该能够再次选择1。但是，当我在select2中选择一个选项时，将从列表中删除所选值。我选择了一个值后，我试图立即清空所选的值，但仍然会删除选定的值。

例如，我选择一个值为1的选项。这使得从列表中删除值为1的选项，在列表中只留下2,3,4,5。当我选择值为2的选项时，将删除此选项，并返回值为1的选项。这使选项列表变为1,3,4,5。

我希望在选择该选项时显示所有选项。但是，我无法解决这个问题。我已经尝试了所有可能的解决方案，但没有一个可行。

Answer 1

我认为val([])包含从1到5的所有可能选择。因此，您应该尝试将$("select").val([])包含在for循环中。例如：

$('select').select2();
$('select').change(function(){
  for(int i=0;i<5;i++)
  {
   $("select").val([i]);
  }
});

修改

我已经找到了解决问题的方法，但我不知道它是否适用于您，而且不了解您的项目。

以下是select标记，当您点击一个或多个选项时，会从select标记列表中删除所单击的一个/：

HTML：

<select id="mySelect" size="4"> <option onclick="myFunction()">1</option> <option onclick="myFunction()">2</option> <option onclick="myFunction()">3</option> <option onclick="myFunction()">4</option> <option onclick="myFunction()">5</option> </select>

JS：

<script> function myFunction() { var x = document.getElementById("mySelect"); x.remove(x.selectedIndex); } </script>

希望对你有用。

Answer 2

Select2 repo上有几个未解决的问题（请参阅：#1002，#1674，#2672）但此功能从未实施过。

解决方法是重新附加所选的选项：

$(document).ready(function() {
  var configParamsObj = {
    templateResult: formatResultData,
  };
  $("#sel").select2(configParamsObj);
});

$("#sel").on("select2:select", function(e) {
  $("#sel").append('<option value="' + e.params.data.text + '">' + e.params.data.text + '</option>');
});

$("#sel").on("select2:unselect", function(e) {
  e.params.data.element.remove();
});

function formatResultData(data) {
  if (!data.id) return data.text;
  if (data.element.selected) return
  return data.text;
};

select {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"> 

Multiple select w/duplicates
<div>
  <select id="sel" multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
  </select>
</div>

P.S。：越位效应是在下拉列表末尾附加选项。

使用select2选择选项时停止删除所选值

2 个答案: