更改值時隱藏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必須已禁用屬性**