如何在多选选项中获取选定选项数据属性

Question

用户选择了多个值。我如何获取每个选定的数据属性值。

HTML 代码是

<select id="EMaddMoreEmployee" name="EMaddMoreEmployee[]" multiple="" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
  <option value="3" data-available_text="Prashant Kumar is unable to work today.">Prashant Kumar</option>
  <option value="4" selected="" data-available_text="Anand Kumar has not given availability for this day.">Anand Kumar</option>
  <option value="7" data-available_text="Manoj Kumar has not given availability for this day.">Manoj Kumar</option>
  <option value="8" data-available_text="Delip Kumar is available to work all day.">Delip Kumar</option>
  <option value="9" data-available_text="Purendar Kumar has not given availability for this day.">Purendar Kumar</option>
  <option value="10" data-available_text="Subhas Kumar has not given availability for this day.">Subhas Kumar</option>
  <option value="11" data-available_text="Hera Dheware has not given availability for this day.">Hera Dheware</option>
  <option value="12" data-available_text="Puspa Di has not given availability for this day.">Puspa Di</option>
</select>

jquery代码是

$('#EMaddMoreEmployee').on('change', function()
            {
                var selected = $(this).find('option:selected', this);
                var availble_text = selected.data('available_text');    
                console.log(availble_text);
            });

Answer 1

您会得到一组选定的选项。

$('#EMaddMoreEmployee').on('change', function() {
    var selected = $(this).find('option:selected', this);
    var results = [];

    selected.each(function() {
        results.push($(this).data('available_text'));
    });


    console.log(results);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="EMaddMoreEmployee" name="EMaddMoreEmployee[]" multiple="" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
  <option value="3" data-available_text="Prashant Kumar is unable to work today.">Prashant Kumar</option>
  <option value="4" selected="" data-available_text="Anand Kumar has not given availability for this day.">Anand Kumar</option>
  <option value="7" data-available_text="Manoj Kumar has not given availability for this day.">Manoj Kumar</option>
  <option value="8" data-available_text="Delip Kumar is available to work all day.">Delip Kumar</option>
  <option value="9" data-available_text="Purendar Kumar has not given availability for this day.">Purendar Kumar</option>
  <option value="10" data-available_text="Subhas Kumar has not given availability for this day.">Subhas Kumar</option>
  <option value="11" data-available_text="Hera Dheware has not given availability for this day.">Hera Dheware</option>
  <option value="12" data-available_text="Puspa Di has not given availability for this day.">Puspa Di</option>
</select>

Answer 2

        $(document).ready(function(){
        $('#EMaddMoreEmployee').on('change', function () {
            console.log($('option:selected').attr('data-available_text'));
        });
    }) ;