如何使切换开关触发选择下拉列表以随机化其选项值？

Question

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

这是我的开关的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相应的选择菜单：

<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>

我想发生的事情是，每次他们单击“ toggle switch to to tocal”“随机”时，相应的下拉菜单都会从列表中显示一个随机选项。我将所有选项名称保存为我的JavaScript中的数组：

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

我知道我需要使用某种事件侦听器和数学随机函数，然后使用一些内容来显示该选项值，但是我想我对如何实际如何实际上感到困惑这样做。然后我想我必须使用$（'＃save-btn'）。on（“ click”，...也将其保存到localstorage。我才开始学习JS，这对我来说并不是真正的直觉但是，任何指导都将不胜感激。

Answer 1

要获取随机数组项使用：

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

选择项目使用：

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

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

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

代码从数组中选择一个随机值，然后放入变量项目中。接下来，在选择字段中选择项目。