選択オプションの選択複数選択オプションのデータ属性

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