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，当我选择“自行车”时，它隐藏了“汽车”的选择组，是否可能？

由于

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

我创建了一个用于隐藏已禁用的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必须已禁用属性**

Answer 3

您可以尝试侦听所选选项的值并根据该值操作结果，例如：

＆＃13;

jQuery(document).ready(function() {
    jQuery('select').each(function() {
        
        jQuery(this).select2();

        $('#vehicle').change(function(){
           if($(this).val() == 'car'){ 
           $('#bike').remove();
          }
        });
      
    });

});

＆＃13;

<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>

＆＃13;

隐藏Select2 Optgroup的价值变化

3 个答案: