如何通过jQuery设置Materialize多选框的初始选中值

嘿，我来帮你搞定这个多选框默认选中的问题！要在页面加载时自动选中Create和Update选项，有两种实用的方法，你可以根据自己的需求来选：

方法1：直接在HTML中设置selected属性 #

这是最直观的静态设置方式，你只需要给目标<option>标签加上selected属性就行。另外注意一下，你原来那个带disabled selected的提示选项，在多选框场景下它的selected其实没有作用（而且禁用的选项本身也无法被用户选中），所以可以把它的selected去掉，避免混淆。修改后的代码如下：

<select multiple id="access_rights">
  <option value="default" disabled>Choose your options</option>
  <option value="create" selected>Create</option>
  <option value="read">Read</option>
  <option value="update" selected>Update</option>
  <option value="delete">Delete</option>
</select>
<label>Select Access Rights</label>

这样页面一加载，Create和Update就会自动处于选中状态了。

方法2：用JavaScript动态设置（适合动态场景） #

如果你的选中状态需要根据后端数据、用户权限或者其他动态逻辑来决定，那用JS来设置会更灵活。你可以在页面DOM加载完成后，找到对应的选项并开启它们的选中状态：

// 等待页面DOM完全加载
document.addEventListener('DOMContentLoaded', function() {
  // 获取多选框元素
  const accessSelect = document.getElementById('access_rights');
  
  // 直接定位到目标选项并设置选中
  accessSelect.querySelector('option[value="create"]').selected = true;
  accessSelect.querySelector('option[value="update"]').selected = true;
});

要是需要批量设置多个选项，还可以用更简洁的遍历方式：

document.addEventListener('DOMContentLoaded', function() {
  // 定义需要选中的权限值
  const targetRights = ['create', 'update'];
  
  // 遍历所有选项，匹配到目标值就设置选中
  document.querySelectorAll('#access_rights option').forEach(option => {
    if (targetRights.includes(option.value)) {
      option.selected = true;
    }
  });
});

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