如何获取多个select列表选中项的value与data-id属性值？

问题根源 #

你用了箭头函数作为change事件的回调，箭头函数没有独立的this上下文，导致$(this)无法指向触发事件的select元素，自然拿不到选中项的值。

修正方案1：改用普通函数 #

把箭头函数换成普通函数，此时this会正确指向当前触发change事件的select：

$(document).on("change", ".sectionSelect", function() {
    // 获取选中option的value
    let section_id = $(this).val();
    // 获取选中option的data-id属性
    let room_id = $(this).find(":selected").data("id");
    console.log(section_id);
    console.log(room_id);
});

修正方案2：使用事件对象的target属性 #

如果坚持用箭头函数，可以通过事件参数event的target属性获取触发元素：

$(document).on("change", ".sectionSelect", (event) => {
    const $select = $(event.target);
    let section_id = $select.val();
    let room_id = $select.find(":selected").data("id");
    console.log(section_id);
    console.log(room_id);
});

补充说明 #

• 获取select的选中值可以直接用$(select元素).val()，不需要额外查找子元素，写法更简洁。
• 获取data属性时，用.data("id")比.attr("data-id")更符合jQuery的data API规范，它会自动处理数据类型转换。

内容的提问来源于stack exchange，提问作者Dhruval Bhuva