jQuery + 选择 2。无法获取每个选定的值

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>

每次选择选择选项后，我都需要获取所有选择的值以在其他选择中禁用它们。所以一个选项只能选择一次。

这是我的 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>