如何用jQuery随机选中下拉选择框（select）的选项？

嘿，我来帮你搞定这个表单随机填充的小问题！你遇到的核心问题其实是错误地把jQuery对象和字符串选择器直接拼接了——$(this)是一个jQuery对象，不是字符串，你直接写$(this+' :nth-child('+index+')')相当于把对象转成了"[object Object] :nth-child(...)"这种无效的选择器，自然找不到元素。

下面给你几个靠谱的解决思路和修正后的代码：

方法1：用.find() + .eq()（最推荐，简洁直观） #

既然$(this)已经指向当前的下拉框，直接用.find()查找它下面的option，再用.eq()定位到随机索引的选项即可。注意.eq()的索引是从0开始的，所以随机数范围要对应调整：

$form.find('select').each(function(){
  const $select = $(this);
  const $options = $select.find('option');
  // 生成0到选项总数-1的随机索引
  const randomIndex = Math.floor(Math.random() * $options.length);
  // 选中对应索引的选项
  $options.eq(randomIndex).prop('selected', true);
});

方法2：用.find()结合:nth-child #

如果你坚持想用:nth-child伪选择器，正确的做法是通过$(this).find()来查找子元素，而不是拼接字符串：

$form.find('select').each(function(){
  const $select = $(this);
  const optionsCount = $select.find('option').length;
  // :nth-child是从1开始计数，所以随机数范围是1到optionsCount
  const randomNth = getRandomArbitrary(1, optionsCount);
  $select.find(':nth-child(' + randomNth + ')').prop('selected', true);
});

方法3：直接设置下拉框的value #

另一种更高效的方式是获取随机选项的value，然后直接给下拉框赋值：

$form.find('select').each(function(){
  const $select = $(this);
  const $options = $select.find('option');
  const randomIndex = Math.floor(Math.random() * $options.length);
  const randomValue = $options.eq(randomIndex).val();
  $select.val(randomValue);
});

额外注意点 #

• 你的getRandomArbitrary函数要确保返回的是整数，不然:nth-child会无效；如果不确定，可以用Math.floor()包裹一下。
• 之前的代码里index = getRandomArbitrary(1,optionsCount-1)会漏掉最后一个选项，因为optionsCount-1是倒数第二个选项的位置，建议把范围改成1到optionsCount（对应:nth-child）或者0到optionsCount-1（对应.eq()）。

内容的提问来源于stack exchange，提问作者Marco