Question

我在select元素中有几个'page'选项，每个选项都有从数据库派生的值。

<select name="page_id" title="page id" class="form-control" id="page">
                                    @forelse($pages as $page)
                                        <option data-slug="{{$page->slug}}" {{($page->id==$c_page->id) ? 'selected' : ''}} value="{{$page->id}}">{{$page->title}}</option>
                                    @empty
                                        <option value=""> No Pages Found</option>
                                    @endforelse
                                </select>

我正试图将'clicked / selected'选项'slug'value变成javascript。

$(function () { /* DOM ready */
        $("#page").change(function () {
            alert($('option').data('slug'));
        });
    });

但这只返回位于顶部的'page'选项的'slug'值。如何从其他选项元素中获取值？

Answer 1

您需要使用:selected选择器并使用this当前元素上下文（附加了事件处理程序）。

$("#page").change(function () {
    var slug = $('option:selected', this).data('slug');
});

作为一个可运行的片段：

$(function() {
  $(".page").change(function() {
    var slug = $('option:selected', this).data('slug');
    console.log('slug: ' + slug);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select class="page">
  <option data-slug="first option">first
  <option data-slug="second option">second
  <option data-slug="third option">third
</select>
<select class="page">
  <option data-slug="first option of second page">first
  <option data-slug="second option of second page">second
  <option data-slug="third option of second page">third
</select>

尝试访问单击选项的数据属性值。

1 个答案: