如何使拨动开关触发 select 下拉菜单以随机化其选项值？

Question

我正在为字符生成器设置一个页面，并且我让用户可以选择随机化特征或输入自己的特征。 我将“选择与随机”选项设置为每个特征类别的切换开关，然后如果他们想选择自己的，我为每个类别提供了下拉 select 菜单，其中列出了所有特征。

这是我的开关 HTML：

<div class="switch">
            <p>Class</p>
            <label>
              My Choice
              <input type="checkbox" id="class-choice">
              <span class="lever red darken-4"></span>
              Random
            </label>
          </div>

这是我的 HTML 对应的 select 菜单：

<div class="input-field col s6">
            <select id="classMenu" name="class">
                <option value="barbarian">Barbarian</option>
                <option value="bard">Bard</option>
                <option value="cleric">Cleric</option>
                <option value="druid">Druid</option>
                <option value="fighter">Fighter</option>
                <option value="monk">Monk</option>
                <option value="paladin">Paladin</option>
                <option value="ranger">Ranger</option>
                <option value="rogue">Rogue</option>
                <option value="sorcerer">Sorcerer</option>
                <option value="warlock">Warlock</option>
                <option value="wizard">Wizard</option>
            </select>
            <label for="class">Class</label>
          </div>

我想要发生的是，每次他们单击切换开关到“随机”时，相应的下拉菜单都会显示列表中的随机选项。 我在 JavaScript 中将所有选项名称保存为数组：

var charClasses = ["barbarian", "bard", "cleric", "druid", "fighter", "monk", "paladin", "ranger", "rogue", "sorcerer", "warlock", "wizard"];

我知道我需要使用某种事件侦听器和数学随机化 function 然后显示该选项值的东西，但我想我对如何实际执行此操作感到困惑。 然后我想我必须使用 $('#save-btn').on("click",... 也将其保存到 localStorage。我刚开始学习 JS，它对我来说并不是很直观然而，任何指导将不胜感激。

Answer 1

要获取数组的随机项，请使用：

var item = charClasses[Math.floor(Math.random()*charClasses.length)];

对 select 项目使用：

$('#classMenu').val("item ");

您可以使用这样的按钮事件：

$('#btnRandom').click(function() {
  var item = charClasses[Math.floor(Math.random()*charClasses.length)];
  $('#classMenu').val(item);
});

代码 select 是数组中的一个随机值并放入变量项中。 接下来 select select 字段中的项目。