jQuery + Select2各選択値を取得できません

Question

私のHTMLはここにあります。私はページに動的に追加されるので、このような要素がたくさんあります。

<div class="select2-container select_filter" id="s2id_p_data_1_student"> 
<a href="javascript:void(0)" class="select2-choice" tabindex="-1"> 
    <span class="select2-chosen" id="select2-chosen-3">John Doe</span><abbr class="select2-search-choice-close"></abbr> 
    <span class="select2-arrow" role="presentation"><b role="presentation"></b></span></a><label for="s2id_autogen3" class="select2-offscreen"></label> 
    <input class="select2-focusser select2-offscreen" type="text" aria-haspopup="true" role="button" aria-labelledby="select2-chosen-3" id="s2id_autogen3" tabindex="-1"> 
</div> 

<select id="p_data_1_student" name="p_data[p_table_data][1][student]" tabindex="-1" class="select_filter" title="" style="display: none;"> 
    <option></option> 
    <option value="2460" disabled="">John Doe</option> 
    <option value="2418" disabled="">Paul Kotula</option> 
    <option value="2414" disabled="">Andrew Skochelias</option> 
</select> 

選択オプションを選択した後、選択した値をすべて取得して、他の選択肢で無効にする必要があります。したがって、1つのオプションは1回だけ選択できます。

これを処理するためのjQuery関数があります。しかし、何らかの理由でそれが唯一の最後の選択オプションの値に

function filterSelect() { 
     jQuery('select.select_filter').each(function() { 
      var selected = jQuery(this).select2('val'); 
       console.log(selected); 
       jQuery('.select_filter option').each(function() { 
        jQuery('.select_filter option[value="' + selected + '"]').prop('disabled', true); 
       }); 
     }); 
    } 

Answer 1

を返しますが、オプションの変更の包みを可能にするために、他の選択オプションを無効にするselect2:selectイベントを使用し、select2:selectingする必要があります。

はこれを試してください： -

$('select').select2() 
 

 
$('select').on('select2:selecting', function(e) { 
 
disableEnableOption.call(this, this.value, false); 
 
}); 
 

 
$('select').on('select2:select', function(e) { 
 
    disableEnableOption.call(this, e.params.data.id, true); 
 
}); 
 

 
function disableEnableOption(value, disable){ 
 
    $('select').not(this).find('option').filter(function() { 
 
    return this.value == value; 
 
    }).prop('disabled', disable) 
 
    .parent().select2('destroy').select2(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.css" rel="stylesheet" /> 
 

 

 
<select id="p_data_1_student" name="p_data[p_table_data][1][student]" tabindex="-1" class="select_filter" title="" style="display: none;"> 
 
    <option></option> 
 
    <option value="2460">John Doe</option> 
 
    <option value="2418">Paul Kotula</option> 
 
    <option value="2414">Andrew Skochelias</option> 
 
</select> 
 

 
<select id="p_data_2_student" name="p_data[p_table_data][2][student]" tabindex="-1" class="select_filter" title="" style="display: none;"> 
 
    <option></option> 
 
    <option value="2460">John Doe</option> 
 
    <option value="2418">Paul Kotula</option> 
 
    <option value="2414">Andrew Skochelias</option> 
 
</select> 
 

 
<select id="p_data_3_student" name="p_data[p_table_data][3][student]" tabindex="-1" class="select_filter" title="" style="display: none;"> 
 
    <option></option> 
 
    <option value="2460">John Doe</option> 
 
    <option value="2418">Paul Kotula</option> 
 
    <option value="2414">Andrew Skochelias</option> 
 
</select>