如何在select2中禁用选项 [英] How to disable options in select2

问题描述

我想用select2取用户的偏好。选择一个选项后，其他select2中的选项应禁用。

I want to take user's preference with select2. Upon selecting one option the option in other select2 should disable.

样本：

偏好1：
选项1
选项2
选项3
选项4

Preference 1: Option 1 Option 2 Option 3 Option 4

优惠2：
选项1
选项2
选项3
选项4

Preference 2: Option 1 Option 2 Option 3 Option 4

优惠3：
选项1
选项2
选项3
选项4

Preference 3: Option 1 Option 2 Option 3 Option 4

偏好4：
选项1
选项2
选项3
选项4

Preference 4: Option 1 Option 2 Option 3 Option 4

如果我在首选项1中选择选项1，则应在首选项1,2,3,4
中禁用，如果我在首选项2中选择选项2，则应在首选项1,2,3,4
中禁用如果我在首选项3中选择选项3，则应在首选项中禁用1,2,3,4

If I select option 1 in preference 1 it should disable in preferences 1,2,3,4 and if I select option 2 in preference 2 it should disable in preferences 1,2,3,4 and if I select option 3 in preference 3 it should disable in preferences 1,2,3,4

再次，如果我在首选项2中选择选项4，则应在首选项中禁用1,2,3,4和选项2应该可以在首选项3和4中选择。

Again and if I select option 4 in preference 2 it should disable in preferences 1,2,3,4 and option 2 should be available for select in Preferences 3&4.

我已经厌倦了各种实现但是卡住了。帮助我。

I have tired various implementations but stuck. Help me out.

HTML：

<div class="form-group col-md-6 m-t-sm">
    <label> Select Preference 1: </label>
    <select class="form-control" id="pref1" name="pref1" style="width:100%">
    <option value=""> Select Campus Preference 1 </option>
    <option value="N"> N </option>
    <option value="O"> O </option>
    <option value="R"> R </option>
    <option value="S"> S </option>
    </select>
    <label id="pref1-error" class="error" for="pref1"></label>
</div>
.
.
.

我当前的js：

$('select[name*="pref"]').change(function(){

    // start by setting everything to enabled
    $('select[name*="pref"] option').prop('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="pref"]').each(function(){ 
        var $this = $(this);
        $('select[name*="pref"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val()){            
               $(this).prop('disabled',true);               
           }
        });
    });

});

推荐答案

您可以在禁用后重新初始化选择使用以下代码

you can reinitialize select after disabling it use following code

$("select").select2("destroy").select2();

类似

$('select[name*="pref"]').change(function(){

    // start by setting everything to enabled
    $('select[name*="pref"] option').prop('disabled',false);

    // loop each select and set the selected value to disabled in all other selects
    $('select[name*="pref"]').each(function(){ 
        var $this = $(this);
        $('select[name*="pref"]').not($this).find('option').each(function(){
           if($(this).attr('value') == $this.val()){            
               $(this).prop('disabled',true);               
           }
        });
    });
    $('select[name*="pref"]').select2("destroy").select2();
});

希望我能帮到你

这篇关于如何在select2中禁用选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！