根据所选值禁用 select2 选项

Question

我正在尝试做一些与此小提琴非常相似的事情，但我不想禁用与所选相同组中的其他选项，而是想禁用与所选选项不在同一组中的所有选项。 ..因此迫使用户从同一组中选择另一个选项。

但是，即使我只是从小提琴中复制代码，它也会给我一个错误：

https://jsfiddle.net/bindrid/hpkqxto6/

   <select multiple style="width: 300px">
      <option groupid="a" value="A_AK">Alaska</option>
      <option groupId="b" value="B_HI">Hawaii</option>
      <option groupid="c" value="C_CA">California</option>
      <option groupid="a" value="D_NV">Nevada</option>
      <option groupid="b" value="A_OR">Oregon</option>
      <option groupid="c" value="B_WA">Washington</option>
      <option groupid="a" value="C_AZ">Arizona</option>
      <option groupid="b" value="D_CO">Colorado</option>
      <option groupid="c" value="A_ID">Idaho</option>
      <option groupid="a" value="B_MT">Montana</option>
      <option groupid="b" value="C_NE">Nebraska</option>
      <option groupid="c" value="D_NM">New Mexico</option>
      <option groupid="a" value="A_ND">North Dakota</option>
      <option groupid="b" value="B_UT">Utah</option>
      <option groupid="c" value="C_WY">Wyoming</option>
    </select>

         $(function() {
       $('select').select2({
         allowClear: true,
         placeholder: "Pick a State"
       });
    
       //Select2 Event handler for selecting an item
       $('select').on("select2:selecting", function(evt, f, g) {
         disableSel2Group(evt, this, true);
       });
    
       // Select2 Event handler for unselecting an item
       $('select').on("select2:unselecting", function(evt) {
         disableSel2Group(evt, this, false);
       });
     });
    
    
     // At some point during the select2 instantation it created the 
     // data object it needs with the source select option.
     // This function, called by the events above to set the current status for the
     // group for which the selected option belongs.
     function disableSel2Group(evt, target, disabled) {
       // Found a note in the Select2 formums on how to get the item to be selected
    
       var selId = evt.params.args.data.id;
       var group = $("option[value='" + selId + "']").attr("groupid");
    
       var aaList = $("option", target);
       $.each(aaList, function(idx, item) {
         var data = $(item).data("data");
    
         var itemGroupId = $("option[value='" + data.id + "']").attr("groupid");
         if (itemGroupId == group && data.id != selId) {
           data.disabled = disabled;
         }
       })
     }

这个想法是，当在 select2 下拉列表中选择一个选项时，它会禁用其他选项。但是，即使我只是简单地重新创建此代码，我也会收到一个错误（无法读取未定义的属性 'id'），该错误会在行上触发：

    var group = $("option[value='" + selId + "']").attr("groupid");

谁能帮助修复错误，然后帮助我实现禁用所有其他组的主要目的？谢谢。

Answer 1

您可以使用evt.params.args.data.element，这将为您提供选项标记html，然后使用此您可以获得groupid 值并将其与所有选项attr 进行比较，如果不是相同的禁用该选项。

现在，而不是unselecting使用unselect因为这里需要在选择框没有选择任何值时启用所有选项。因此，在您的函数中获取select2('data').length，如果长度为0，则仅启用所有选项。

演示代码：

$(function() {
  $('select').select2({
    allowClear: true,
    placeholder: "Pick a State"

  });

  $('select').on("select2:selecting", function(evt, f, g) {
    disableSel2Group(evt, this, true);
  });

  $('select').on("select2:unselect", function(evt) {
    disableSel2Group(undefined, undefined, false);
  });

})



function disableSel2Group(evt, target, disabled) {
  //check if disabled true
  if (disabled) {
    //get option
    var selId = evt.params.args.data.element;
    var group = $(selId).attr('groupid') //groupid 

    var aaList = $("option", target);
    $.each(aaList, function(idx, item) {
      var other_groups = $(item).attr("groupid"); //get option groupid
      var data = $(item).data("select2-id"); //get option selct2id
      //if not same
      if (group != other_groups) {
        $("select option[data-select2-id =" + data + "]").prop("disabled", true); //disable that option

      }
    })
  } else {
    var count = $('select').select2('data').length //checcking slected data count
    console.log(count)
    //if 0 
    if (count == 0) {
      $("select option").prop("disabled", false); //enable all options
    }
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">

<script src="https://code.jquery.com/jquery-3.5.0.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<select multiple style="width: 300px">

  <option groupid="a" value="A_AK">Alaska</option>

  <option groupid="b" value="B_HI">Hawaii</option>

  <option groupid="c" value="C_CA">California</option>

  <option groupid="a" value="D_NV">Nevada</option>

  <option groupid="b" value="A_OR">Oregon</option>

  <option groupid="c" value="B_WA">Washington</option>

  <option groupid="a" value="C_AZ">Arizona</option>

  <option groupid="b" value="D_CO">Colorado</option>

  <option groupid="c" value="A_ID">Idaho</option>

  <option groupid="a" value="B_MT">Montana</option>

  <option groupid="b" value="C_NE">Nebraska</option>

  <option groupid="c" value="D_NM">New Mexico</option>

  <option groupid="a" value="A_ND">North Dakota</option>

  <option groupid="b" value="B_UT">Utah</option>

  <option groupid="c" value="C_WY">Wyoming</option>

</select>