如何实现toggle切换开关触发select下拉框随机选中选项值

你直接按下面的逻辑写代码即可，完全适配你当前用的Materialize框架和jQuery写法，可直接运行：

1. 开关触发随机选值逻辑 #

核心逻辑很直接：监听切换开关的状态变化，当开关拨到Random（复选框选中）状态时，从职业数组里随机抽一个值赋给下拉框，再同步更新Materialize组件的显示即可。

注意：Materialize的自定义select组件不会自动同步JS修改的值，每次改完选中项必须手动调用组件更新方法，不然界面不会同步变化。

对应代码：

// 你已经定义好的职业数组
var charClasses = ["barbarian", "bard", "cleric", "druid", "fighter", "monk", "paladin", "ranger", "rogue", "sorcerer", "warlock", "wizard"];

// 所有逻辑放到DOM加载完成的回调里，避免页面没渲染完找不到元素
$(document).ready(function() {
  // 初始化Materialize下拉组件，这是框架要求的必须步骤
  $('select').formSelect();

  // 给职业切换开关绑定状态变化事件
  $('#class-choice').on('change', function() {
    // 开关选中 = 拨到Random档位
    if ($(this).is(':checked')) {
      // 生成合法的数组随机索引：范围是0 ~ 数组长度-1
      const randomIndex = Math.floor(Math.random() * charClasses.length);
      // 取出随机职业值
      const randomClassVal = charClasses[randomIndex];
      // 给下拉框设置选中值
      $('#classMenu').val(randomClassVal);
      // 刷新下拉组件显示
      $('#classMenu').formSelect();
    }
  });

2. 保存数据到localStorage逻辑 #

点击保存按钮时，取出当前选中的职业值和开关状态，转成JSON字符串存入localStorage即可，还可以加页面加载时自动恢复上次保存内容的逻辑，使用体验更好。
代码直接接在上面的$(document).ready回调里就行：

// 绑定保存按钮点击事件
  $('#save-btn').on('click', function() {
    // 取当前下拉框选中的职业
    const currentClass = $('#classMenu').val();
    // 取当前开关状态（区分是自定义选的还是随机生成的）
    const isRandom = $('#class-choice').is(':checked');

    // 组装要存的角色数据
    const character = {
      class: currentClass,
      classIsRandom: isRandom
    };

    // localStorage只能存字符串，所以把对象转成JSON格式再存
    localStorage.setItem('myCharacter', JSON.stringify(character));
    
    // 可选：弹Materialize自带的提示，告诉用户保存成功
    M.toast({html: '角色配置已保存'});
  });

  // 可选：页面打开时自动读取上次存的配置，恢复选中状态
  const savedChar = localStorage.getItem('myCharacter');
  if (savedChar) {
    const charData = JSON.parse(savedChar);
    // 恢复下拉选中值
    $('#classMenu').val(charData.class);
    // 恢复开关状态
    $('#class-choice').prop('checked', charData.classIsRandom);
    // 刷新组件显示
    $('#classMenu').formSelect();
  }
});

常见踩坑提醒 #

• 随机索引不要写错：Math.random()返回0到1之间的数（包含0不包含1），乘数组长度后向下取整，刚好能覆盖数组所有下标，不会出现取到不存在的数组元素的问题
• 后续加其他特质分类（比如种族、背景、性格）的时候逻辑完全一致，只需要换对应开关、下拉框、选项数组的id就行，重复逻辑可以抽成公共函数减少冗余代码
• 存localStorage的时候必须用JSON.stringify转字符串，直接存JS对象会被转成无意义的[object Object]，读取的时候要用JSON.parse转回对象才能正常取值
• 只要是用JS修改select的选中值，改完一定要调用.formSelect()刷新Materialize组件，不然界面上看到的还是之前的选项

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