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

$(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 3

您必须使用$('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 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>

从选择中获取自定义属性

4 个答案: