Получить пользовательский атрибут из выбора

Question

Как я могу получить атрибут data-itemslimit из выбранной опции?

$(function() {
    $('#content_id').on('change', function(){
      alert($('#content_id').attr('data-itemslimit'));
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<select id="content_id" class="form-control" data-reactid=".2.3.4.2.0.1.0.1.0">
  <option value="22" data-itemslimit="9" data-reactid=".2.3.4.2.0.1.0.1.0.$22">Content Test</option>
  <option value="23" data-itemslimit="6" data-reactid=".2.3.4.2.0.1.0.1.0.$23">Second Content</option>
</select>

Я получаю undefined ...

Answer 1

Вы можете использовать следующий код.

$('#content_id').on('change', function(e) {
        var data = $(this).children("option:selected").data('itemslimit');
        alert(data);
    });

Answer 2

Вы должны использовать $('option:selected',this).attr('data-itemslimit'), потому что в ваших опциях есть data-itemslimit, а не сам выбор.

Демо

$(function() {
    $('#content_id').on('change', function(){
      alert($('option:selected',this).attr('data-itemslimit'));
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<select id="content_id" class="form-control" data-reactid=".2.3.4.2.0.1.0.1.0">
  <option value="22" data-itemslimit="9" data-reactid=".2.3.4.2.0.1.0.1.0.$22">Content Test</option>
  <option value="23" data-itemslimit="6" data-reactid=".2.3.4.2.0.1.0.1.0.$23">Second Content</option>
</select>

Answer 3

Использование option:selected

$(function() {
    $('#content_id').on('change', function(){
      alert($('option:selected', this).attr('data-itemslimit'));
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<select id="content_id" class="form-control" data-reactid=".2.3.4.2.0.1.0.1.0">
  <option value="22" data-itemslimit="9" data-reactid=".2.3.4.2.0.1.0.1.0.$22">Content Test</option>
  <option value="23" data-itemslimit="6" data-reactid=".2.3.4.2.0.1.0.1.0.$23">Second Content</option>
</select>

Ссылка

https://api.jquery.com/jQuery/#selector-context

https://api.jquery.com/selected-selector/

Answer 4

Вариант использования: выбран для изменения:

js:

$(function() {
     $('select').on('change', function(){
      alert($('option:selected',this).attr('data-itemslimit'));
    })
});

html:

<select id="content_id" class="form-control" data-reactid=".2.3.4.2.0.1.0.1.0">
  <option value="22" data-itemslimit="9" data-reactid=".2.3.4.2.0.1.0.1.0.$22">Content Test</option>
  <option value="23" data-itemslimit="6" data-reactid=".2.3.4.2.0.1.0.1.0.$23">Second Content</option>
</select>