如何删除或禁用 select2 中的项目答案

【问题标题】：How can i delete or disable items in select2如何删除或禁用 select2 中的项目
【发布时间】：2019-07-18 03:09:59
【问题描述】：

您好，当我的value(x) = 1 时，我想删除或禁用我的 select2 的第一项。我怎样才能做到这一点？谢谢。

var myData= [
    {
        id: "id1",
        text: 'aaaaa'
    }, {
        id: "id2",
        text: 'bbbbb'
    }
            ];


var x=0;
if (x == '1') {
    $('.select2 option[value="' + myData[0]+ '"]').remove()
}

【问题讨论】：

标签： javascript jquery-select2

【解决方案1】：

我假设您正在使用 jQuery select2 并且您正在从 myData 创建您的 select2 元素。

如果您的数据是事实的来源，您可以通过这种方式保持更新并在您的 DOM 中反映该状态（您所看到的）。

使用.shift()。从数据数组中删除第一个元素。

然后使用新数据重新初始化您的 select2 元素。像这样（下面的完整工作代码）：

// condition > do something to select2 element's data
if (true) {
  // remove first data item from array
  myData.shift();

  // empty select2 element's data and re-init
  $(".select2").empty();
  $(".select2").select2({
    data: myData
  });
}

您可以运行它来查看它是否正常工作。应用条件后，只剩下 myData 中的第二个数据项。

如果这解决了您的问题，请通过接受答案告诉我:)

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>

<select class="select2"> </select>

<script>
  $(document).ready(function() {
    // data
    var myData = [
      {
        id: "id1",
        text: "aaaaa"
      },
      {
        id: "id2",
        text: "bbbbb"
      }
    ];

    // your select2 element already exists
    $(".select2").select2({
      data: myData
    });

    // condition > do something to select2 element's data
    if (true) {
      // remove first data item from array
      myData.shift();

      // empty select2 element's data and re-init
      $(".select2").empty();
      $(".select2").select2({
        data: myData
      });
    }
  });
</script>

来自MDN：shift() 方法从数组中删除第一个元素并返回删除的元素。此方法更改数组的长度。

【讨论】：

【解决方案2】：

<select name="carlist" form="carform">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

如果您想从选择选项中删除沃尔沃，请使用此

$("select option[value='volvo']").remove()

【讨论】：

我认为问题是关于 select2 库 - 而不是本机选择控件。