Choose random options from multiple select menus at the same time

Using Javascript select random option, I can see it's possible to have a single select element on a page, and to set up a link on the page that will select a random option from that select element using jQuery.

This is the basic HTML, using the solution from the link - which chooses a random option from the first select.

$(document).ready(function () {
    $("#randomSelect").click(function () {
        var select = document.getElementById('cat01');
        var items = select.getElementsByTagName('option');
        var index = Math.floor(Math.random() * items.length);
        select.selectedIndex = index;
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="selects">

    <select name="cat01" id="cat01" class="form-select">
        <option value="cats">Cats</option>
        <option value="dogs">Dogs</option>
        <option value="eagles">Eagles</option>
        <option value="rabbits">Rabbits</option>
    </select>
    
    <hr>

    <select name="cat02" id="cat02" class="form-select">
        <option value="cats">Cats</option>
        <option value="dogs">Dogs</option>
        <option value="eagles">Eagles</option>
        <option value="rabbits">Rabbits</option>
    </select>
    
    <hr>

    <select name="cat03" id="cat03" class="form-select">
        <option value="cats">Cats</option>
        <option value="dogs">Dogs</option>
        <option value="eagles">Eagles</option>
        <option value="rabbits">Rabbits</option>
    </select>
    
    <hr>

    <select name="cat04" id="cat04">
        <option value="cats">Cats</option>
        <option value="dogs">Dogs</option>
        <option value="eagles">Eagles</option>
        <option value="rabbits">Rabbits</option>
    </select>
    
    <hr>

    <a href="#" id="randomSelect">Select random</a>

</div>

How could I achieve the same result, but instead of using the link to select a random option from a single select element, use it to select a random option from all 4 select elements at the same time?

I tried using document.getElementsByClassName('form-select'); instead, but that didn't work.

Solution

When button#randon is "clicked"

$("#random").on("click", function() {//...

Do the following on .each() select.form-select
```
$(".form-select").each(function() {//...
```
Get the number of <option>s in current select.form-select (eg this)
```
const qty = this.options.length;
```

Then get an index number randomly

const index = Math.floor(Math.random() * qty);

And apply that index number to the current select.form-select .selectedIndex property
```
this.selectedIndex = index;
```

jQuery

$("#random").on("click", function() {
  $(".form-select").each(function() {
    const qty = this.options.length;
    const index = Math.floor(Math.random() * qty);
    this.selectedIndex = index;
  });
});

<form id="selects">

  <select id="cat01" name="cat" class="form-select">
    <option value="cats">Cats</option>
    <option value="dogs">Dogs</option>
    <option value="eagles">Eagles</option>
    <option value="rabbits">Rabbits</option>
  </select>

  <hr>

  <select id="cat02" name="cat" class="form-select">
    <option value="cats">Cats</option>
    <option value="dogs">Dogs</option>
    <option value="eagles">Eagles</option>
    <option value="rabbits">Rabbits</option>
  </select>

  <hr>

  <select id="cat03" name="cat" class="form-select">
    <option value="cats">Cats</option>
    <option value="dogs">Dogs</option>
    <option value="eagles">Eagles</option>
    <option value="rabbits">Rabbits</option>
  </select>

  <hr>

  <select id="cat04" name="cat" class="form-select">
    <option value="cats">Cats</option>
    <option value="dogs">Dogs</option>
    <option value="eagles">Eagles</option>
    <option value="rabbits">Rabbits</option>
  </select>

  <hr>

  <button id="random" type="button">Select Random Categories</button>

</form>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

JavaScript

const ui = document.forms.selects;
const io = ui.elements;
const selects = io.cat;

io.random.addEventListener("click", function(e) {
  selects.forEach(sel => {
    const qty = sel.options.length;
    const index = Math.floor(Math.random() * qty);
    sel.selectedIndex = index;
  });
});

<form id="selects">

  <select id="cat01" name="cat" class="form-select">
    <option value="cats">Cats</option>
    <option value="dogs">Dogs</option>
    <option value="eagles">Eagles</option>
    <option value="rabbits">Rabbits</option>
  </select>

  <hr>

  <select id="cat02" name="cat" class="form-select">
    <option value="cats">Cats</option>
    <option value="dogs">Dogs</option>
    <option value="eagles">Eagles</option>
    <option value="rabbits">Rabbits</option>
  </select>

  <hr>

  <select id="cat03" name="cat" class="form-select">
    <option value="cats">Cats</option>
    <option value="dogs">Dogs</option>
    <option value="eagles">Eagles</option>
    <option value="rabbits">Rabbits</option>
  </select>

  <hr>

  <select id="cat04" name="cat" class="form-select">
    <option value="cats">Cats</option>
    <option value="dogs">Dogs</option>
    <option value="eagles">Eagles</option>
    <option value="rabbits">Rabbits</option>
  </select>

  <hr>

  <button id="random" type="button">Select Random Categories</button>

</form>