更改值时隐藏Select2 Optgroup

Question

我在我的选择列表中有2个optgroup，我试图显示一个optgroup并隐藏其他选择的车辆。

jQuery(document).ready(function() { 
    jQuery('select').each(function() { 
     
     jQuery(this).select2(); 
     
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script> 
<select id="vehicle" name="vehicle"> 
    <option value="car">Car</option> 
    <option value="bike">Bike</option> 
</select> 

<select id="car" name="car"> 
    <optgroup label="Bike"> 
    <option value="001">Kawasaki</option> 
    <option value="002">Suzuki</option> 
    </optgroup> 
    <optgroup label="Car"> 
    <option value="c001">Mclaren</option> 
    <option value="c002">Ferrari</option> 
    </optgroup> 
</select>

所有我想要的是，当我选择“汽车”，它隐藏的“自行车” OPTGROUP，当我选择“自行车”，它隐藏“汽车”的OPTGROUP，是有可能吗？

感谢

Answer 1

它可能会更好（稍微更用户友好），如果你只是禁用选项，而不是删除它们。这也由Select2本地支持，因此用户将无法选择禁用的选项。

jQuery(document).ready(function() { 
 
    jQuery('select').each(function() { 
 
     jQuery(this).select2(); 
 
    }); 
 

 
    jQuery('#vehicle').on('change', function() { 
 
     if ($(this).val() == 'car') { 
 
      $('#car-bike option').prop('disabled', true); 
 
      $('#car-car option').prop('disabled', false); 
 
     } else { 
 
      $('#car-bike option').prop('disabled', false); 
 
      $('#car-car option').prop('disabled', true); 
 
     } 
 

 
     // Tell Select2 to update the current selection 
 
     // Some browsers (correctly) switch the selected option if it is disabled 
 
     // Others don't, which is unfortunate 
 
     $('#car').trigger('change'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script> 
 

 
<select id="vehicle" name="vehicle"> 
 
    <option value="car">Car</option> 
 
    <option value="bike">Bike</option> 
 
</select> 
 

 
<select id="car" name="car"> 
 
    <optgroup id="car-bike" label="Bike"> 
 
    <option value="001">Kawasaki</option> 
 
    <option value="002">Suzuki</option> 
 
    </optgroup> 
 
    <optgroup id="car-car" label="Car"> 
 
    <option value="c001">Mclaren</option> 
 
    <option value="c002">Ferrari</option> 
 
    </optgroup> 
 
</select>

Answer 2

你可以尝试收听选择的选项的值和操作结果此基础上，例如像：

jQuery(document).ready(function() { 
 
    jQuery('select').each(function() { 
 
     
 
     jQuery(this).select2(); 
 

 
     $('#vehicle').change(function(){ 
 
      if($(this).val() == 'car'){ 
 
      $('#bike').remove(); 
 
      } 
 
     }); 
 
     
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2-bootstrap.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script> 
 
<select id="vehicle" name="vehicle"> 
 
    <option value="car">Car</option> 
 
    <option value="bike" selected>Bike</option> 
 
</select> 
 

 
<select id="car" name="car"> 
 
    <optgroup id="bike" label="Bike"> 
 
    <option value="001">Kawasaki</option> 
 
    <option value="002">Suzuki</option> 
 
    </optgroup> 
 
    <optgroup label="Car"> 
 
    <option value="c001">Mclaren</option> 
 
    <option value="c002">Ferrari</option> 
 
    </optgroup> 
 
</select>

Answer 3

我创建了一个黑客隐藏残疾人optgroups：

$.initialize(".select2-results__option[role='group']", function(index, optionGroup) 
    { 
     let optGroupName = $(this).attr("aria-label"); 

     let select2ResultsId =$(this).closest("ul.select2-results__options").attr("id"); 

     if(select2ResultsId) 
     { 
      let ptrn = /^select2-([\w]+)-results/i; 
      let res =ptrn.exec(select2ResultsId); 

      if(res.length > 0) 
      { 
       let relSelect2Id = res[1]; 

       let relOptGroup= $("#" + relSelect2Id).find("optgroup[label='" +optGroupName + "'][disabled]"); 

       if (relOptGroup.length) 
       { 
        $(optionGroup).attr("disabled", "disabled"); 
        $(optionGroup).attr("aria-disabled", "true"); 
       } 
      } 
     } 
    }); 

的CSS：

.select2-results__option[aria-disabled=true], 
.select2-results__option[disabled] 
{display:none} 

$ .initialize是jQuery插件：https://github.com/pietrasiak/jquery.initialize

** select中的相关optgroup必须已禁用属性**