使用jQuery从select元素的data属性设置选中选项失效问题及多元素批量处理需求

我来帮你分析问题出在哪，以及怎么一步步修复：

为什么你的原有代码不生效？ #

1. 批量操作未单独处理每个select
   你写的$('select').val($('select').data('value'))只会读取第一个select的data-value值，然后把所有select都设置成这个值，这显然不符合你批量处理每个元素的需求。
2. 可能未等待DOM加载完成
   如果JS代码在DOM元素还没完全渲染好的时候就执行，设置val()的操作会因为元素未初始化而失效。
3. HTML中select的value属性不生效
   浏览器并不识别select标签本身的value属性，选中状态只能通过给对应option加selected属性，或者用JS动态设置来实现。

正确的实现方式 #

我们需要遍历每个select元素，单独读取它自己的data-value，再设置对应的选中项，同时确保代码在DOM加载完成后执行：

jQuery版本

// 等待DOM完全加载后执行代码
$(document).ready(function() {
  // 遍历所有select元素
  $('select').each(function() {
    // 获取当前select的data-value值
    const targetValue = $(this).data('value');
    // 为当前select设置选中选项
    $(this).val(targetValue);
  });
});

对应的HTML保持你原来的写法即可：

<?php $selectval = 0; ?>
<select data-value="<?=$selectval?>">
<option value="1">yes</option>
<option value="0">no</option>
</select>

<!-- 多个select的示例 -->
<?php $anotherVal = 1; ?>
<select data-value="<?=$anotherVal?>">
<option value="1">yes</option>
<option value="0">no</option>
</select>

原生JS版本（无需jQuery）

如果你更倾向于原生JS，也可以这样实现：

document.addEventListener('DOMContentLoaded', function() {
  // 获取所有select元素
  const selects = document.querySelectorAll('select');
  // 遍历每个select
  selects.forEach(select => {
    // 读取当前select的data-value
    const targetValue = select.dataset.value;
    // 设置选中值
    select.value = targetValue;
  });
});

额外优化建议 #

如果存在部分select没有data-value属性的情况，可以加个判断避免无效操作：

$('select').each(function() {
  const targetValue = $(this).data('value');
  if (targetValue !== undefined) {
    $(this).val(targetValue);
  }
});

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