如何通过JavaScript同时为多个下拉选择框随机选择选项

嘿，这个问题其实很好解决，核心就是把原来针对单个下拉框的随机选中逻辑，改成遍历所有目标下拉框逐个处理就行！咱们一步步来：

问题根源 #

你之前用document.getElementsByClassName('form-select')没成功，是因为这个方法返回的是一个元素集合（类数组对象），而不是单个元素，没法直接像操作单个select那样直接设置selectedIndex，得循环遍历集合里的每个元素单独处理才行。

另外看你的HTML里，最后一个下拉框（cat04）没有加form-select类，如果要把它也包含进去，咱们可以用更宽泛的选择器，比如直接选中selects容器里的所有<select>元素，这样不管有没有类都能覆盖到。

修改后的完整代码（jQuery版本） #

下面是调整后的代码，点击「Select random」后，4个下拉框会各自随机选中一个选项：

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

<script>
$(document).ready(function () {
  $("#randomSelect").click(function (e) {
    // 阻止链接默认跳转行为，避免点击后页面回到顶部
    e.preventDefault();
    // 选中selects容器里的所有下拉框，4个都会被包含进来
    const allSelects = $('.selects select');
    // 遍历每个下拉框，逐个执行随机选中逻辑
    allSelects.each(function() {
      // 获取当前下拉框的所有选项
      const options = $(this).find('option');
      // 生成0到选项数量-1之间的随机索引
      const randomIndex = Math.floor(Math.random() * options.length);
      // 设置当前下拉框的选中项
      $(this).prop('selectedIndex', randomIndex);
    });
  });
});
</script>

关键修改点说明 #

1. 阻止链接默认行为：加了e.preventDefault()，避免点击#链接后页面自动跳转到顶部。
2. 批量获取下拉框：用$('.selects select')选中容器内所有下拉框，不管有没有form-select类都能覆盖。
3. 遍历处理每个下拉框：用each()方法逐个处理，每个下拉框都独立生成随机索引并设置选中项，保证每个框的随机结果互不影响。

原生JavaScript版本（无需jQuery） #

如果你不想依赖jQuery，用原生JS也能实现完全一样的效果：

<div class="selects">
  <!-- 这里是和上面一致的HTML下拉框结构 -->
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('randomSelect').addEventListener('click', function(e) {
    e.preventDefault();
    // 批量获取所有目标下拉框
    const allSelects = document.querySelectorAll('.selects select');
    // 遍历每个下拉框处理
    allSelects.forEach(select => {
      const randomIndex = Math.floor(Math.random() * select.options.length);
      select.selectedIndex = randomIndex;
    });
  });
});
</script>

这样两种方案都能实现点击一次按钮，所有下拉框各自随机选中一个选项的效果啦～

内容来源于stack exchange