JQuery中select onChange事件触发时data属性显示undefined问题排查

嘿，我立刻就发现问题出在哪啦！你在onchange事件里用$(this)指向的是整个<select>元素，但你把data-last-sync-shop属性绑定在了<option>子选项上——直接在<select>上调用data('lastSyncShop')自然找不到对应的值，所以才会返回undefined。

修正步骤 #

你需要先定位到当前选中的<option>元素，再读取它的data属性，具体有两种写法：

1. 直接修改内联onchange代码

把原来的事件处理逻辑改成：

<select id="shopSelect" onchange="$('#lastSync').text($(this).find('option:selected').data('lastSyncShop'));" name="shop_select">
  <option value=""></option>
  <?php foreach ($shops as $code => $info) { ?>
    <option value="<?= $code ?>" data-last-sync-shop="<?= $info['last_sync'] ?>">
      <?= $info['description'] ?>
    </option>
  <?php } ?>
</select>
<span id="lastSync">-</span>

对应的调试代码改成：

<select id="shopSelect" onchange="console.log($(this).find('option:selected').data('lastSyncShop'));" name="filtro[codice_shop_select]">

2. 更优雅的抽离式事件绑定（推荐）

把事件处理逻辑从HTML中抽离到单独的JS代码块，这样更易维护和调试：

$(document).ready(function() {
  $('#shopSelect').on('change', function() {
    // 获取选中的option元素
    const selectedOption = $(this).find('option:selected');
    // 读取data属性，默认值设为'-'避免空值
    const lastSyncValue = selectedOption.data('lastSyncShop') || '-';
    // 更新显示内容
    $('#lastSync').text(lastSyncValue);
  });
});

同时记得移除HTML中的内联onchange属性：

<select id="shopSelect" name="shop_select">
  <!-- 选项内容不变 -->
</select>

为什么之前的写法无效？ #

jQuery的data()方法只会读取当前调用对象上的data属性，不会自动遍历子元素。你之前直接在<select>上调用data('lastSyncShop')，相当于在找<select>标签本身上的data-last-sync-shop属性，而这个属性根本不存在——它只存在于每个<option>子项里，所以必须明确选中对应的子元素再读取。

内容的提问来源于stack exchange，提问作者Alberto Favaro