select 选项由 jQuery 随机选择

Question

对于表单，我正在添加一个按钮，该按钮在单击时填充/selects 一些随机数据（用于测试目的）。为此，我为输入元素创建了一些函数。对于 select 个列表，我想做这样的事情：

$form.find("select").each(function(){
        let optionsCount = $(this).find('option').length;
        index = getRandomArbitrary(1,optionsCount-1);
        $(this+' :nth-child('+index+')').prop('selected', true); // $(this+' :nth-child('+index+')') is not valid
    });

那应该随机 select 列表中的一个选项 - 是的，上面的代码不起作用但我不知道如何将这样的函数写入“ select 选项随机 jQuery".

我的意思是主要问题是我们不能将 $(this) 与伪类混合，我不知道如何扩展/更改 select 或远离 $(this).

有人可以给我提示吗？

Answer 1

如您所见，您不能将 this 元素引用连接到 jQuery object 中的选择器字符串。这个问题的解决方法是使用eq()的方法，通过生成的随机索引找到每个select的child option。试试这个：

let $form = $('form');

$('.random').on('click', () => {
  $form.find("select").each((i, el) => {
    let $options = $(el).find('option');
    let index = Math.floor(Math.random() * $options.length);
    $options.eq(index).prop('selected', true);
  });
});

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

<form>
  <button type="button" class="random">Select random</button>

  <select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
    <option>F</option>
    <option>G</option>
  </select>

  <select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
    <option>F</option>
    <option>G</option>
  </select>

  <select>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
    <option>E</option>
    <option>F</option>
    <option>G</option>
  </select>
</form>

select 选项由 jQuery 随机选择

select option randomly by jQuery

forms

jquery

html-select