如何获取下拉选中option的data-value？当前输出[object Object]异常

嘿，我来帮你搞定这个问题～你遇到的控制台输出[object Object]的问题，主要是两个小错误导致的，咱们一步步来修正：

问题根源 #

1. 错误的元素选择器：你用$(this).find('li')去查找选中的选项，但你的HTML里<select>内部是<option>标签，根本没有<li>元素，所以这个选择器找不到任何目标，最后得到的是空的jQuery对象，打印时就会显示[object Object]。
2. 未正确提取属性值：就算找到了正确的元素，直接打印jQuery对象也不会输出你想要的data-value内容，必须明确获取这个属性的值。

修正后的代码 #

我们可以用jQuery的:selected选择器精准定位选中的选项，再提取data-value的值：

var filters = {};
$('.filters').on( 'change', function( event ) {
  var $select = $( event.target );
  var filterGroup = $select.attr('value-group');
  
  // 核心修正：获取选中option的data-value值
  var selectedValue = $select.find(':selected').data('value');
  
  console.log("change: " + selectedValue);
  
  // 后续如果需要更新filters对象，可在这里处理
  filters[filterGroup] = selectedValue;
  // var filterValue = concatValues(filters);
  // $grid.isotope({ filter: filterValue });
});

代码解释 #

• $select.find(':selected')：直接定位当前下拉框中被选中的<option>元素，比遍历所有选项更高效。
• .data('value')：jQuery的.data()方法可以直接读取data-*属性的值，写法简洁；你也可以用.attr('data-value')，效果是一样的（对于字符串类型的属性值）。

原生DOM写法（可选） #

如果你想不用jQuery，用原生JS也能实现：

var filters = {};
$('.filters').on( 'change', function( event ) {
  var selectElement = event.target;
  var filterGroup = selectElement.getAttribute('value-group');
  
  // 原生方式获取选中选项的data-value
  var selectedOption = selectElement.options[selectElement.selectedIndex];
  var selectedValue = selectedOption.getAttribute('data-value');
  
  console.log("change: " + selectedValue);
  filters[filterGroup] = selectedValue;
});

现在你再选中London选项，控制台就会输出预期的change: .London啦～

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