2

User select more than one value. How i can get every selected data attribute value.

HTML code is

<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 code is

$('#EMaddMoreEmployee').on('change', function()
            {
                var selected = $(this).find('option:selected', this);
                var availble_text = selected.data('available_text');    
                console.log(availble_text);
            });
Amit Bhagat
  • 4,182
  • 3
  • 23
  • 24
Shiva Manhar
  • 673
  • 8
  • 19
  • use `$('#EMaddMoreEmployee').select2('val');` – Monah Nov 11 '17 at 07:26
  • Possible duplicate of [Get Selected value from Multi-Value Select Boxes by jquery-select2?](https://stackoverflow.com/questions/12889309/get-selected-value-from-multi-value-select-boxes-by-jquery-select2) – Monah Nov 11 '17 at 07:27

2 Answers2

6

You get an array of selected options.

$('#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>
Suresh Atta
  • 120,458
  • 37
  • 198
  • 307
0
        $(document).ready(function(){
        $('#EMaddMoreEmployee').on('change', function () {
            console.log($('option:selected').attr('data-available_text'));
        });
    }) ;
Eshu
  • 185
  • 6