javascript - 如何添加适用于两个下拉菜单的 "random"按钮

Question

我创建了一个页面，其中包含两个包含各种值的下拉菜单。现在我想添加一个“随机”按钮。单击时，此按钮将随机选择两个字段中的任何值。 (这些值也会复制到每个菜单上方的框中)。

Project idea for drop down menus

到目前为止，我已经对菜单进行了编码，并且当用户选择菜单时，它们上方的框中显示的单词。但现在我正在尝试添加一个随机按钮，该按钮会将下拉列表中的任何值设置为选定状态，当然也会显示在上面的文本框中。理想情况下，每隔一段时间就会在下拉菜单中添加更多值，而不会导致脚本功能失调......并且理想情况下，它将全部包含在 HTML 文件中(调用 JQuery 或 javascript 就可以了)。

我看过this但这并不适用。

我还查看了this但这实际上并不是用户激活的功能。

如果有人能提供帮助，非常感激!谢谢

Answer 1

希望这有帮助HTML:

<select id="s1">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<select id="s2">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Javascript:

var minNumber = 0;
var maxNumber = 3;

function randomNumberFromRange(min,max)
{
    return  Math.floor(Math.random()*(max-min+1)+min);


}


$("#s2")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);
$("#s1")[0].selectedIndex = randomNumberFromRange(minNumber, maxNumber);

我为你创建了这个 fiddle ...... https://jsfiddle.net/s59g8vdp/