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

Posted 2023-05-07

【中文标题】如何在多选选项中获取选定选项数据属性

【英文标题】：How to get Selected option Data Attribute in multiple select option

【发布时间】：2018-04-24 10:22:26

【问题描述】：

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

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

【问题讨论】：

使用$('#EMaddMoreEmployee').select2('val');

Get Selected value from Multi-Value Select Boxes by jquery-select2?的可能重复

【参考方案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>

【参考方案2】：

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