根据所选值禁用select2选项

我正在尝试执行与该提琴非常相似的操作，但是与其禁用与所选组不在同一组中的其他选择，我要禁用与所选组不在同一组中的所有选项...因此强制用户从同一组中选择另一个选项。

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

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");

任何人都可以帮助解决该错误，然后帮助我禁用所有其他组的主要目的吗？谢谢。