2017-11-11 158 views
1

用戶選擇多個值。我如何獲得每個選定的數據屬性值。如何在多個選項中選擇選項數據屬性

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); 
      }); 
+0

使用'$( '#EMaddMoreEmployee')選擇2( 'VAL');' – Monah

+0

由多值選擇框[獲取選定值的可能的複製jquery- SELECT2?](https://stackoverflow.com/questions/12889309/get-selected-value-from-multi-value-select-boxes-by-jquery-select2) – Monah

回答

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>

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