Question

我试图在选择下拉列表中随机选择部分顺序。保持第一个选项第一个和后两个选项。

<select class="form-control" id="return-reason">
    <option value="" disabled="disabled" selected="selected">Please select...</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option>Prefer not to say</option>
    <option>Other</option>
</select>

我的工作是将整个列表随机化：

var ul = document.querySelector('#return-reason');
for (var i = ul.children.length; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}

我可以放置＆＃39;请选择＆＃39; HTML列表底部的选项，并通过运行略微修改的循环，它将附加一个随机列表（减去＆＃39;请选择＆＃39;选项）后，请选择＆＃39;。

var ul = document.querySelector('#return-reason');
for (var i = ul.children.length + 1; i >= 0; i--) {
    ul.appendChild(ul.children[Math.random() * i | 0]);
}

但是这仍然没有注意保持不喜欢说＆＃39;和其他＆＃39;底部的选项。我不能完全确定我能以这种方式达到我的要求，而且感觉不对。

任何人都可以建议前进的方向。

出于我自己的目的，它不必100％准确随机。

Answer 1

首先，最好添加一个指定该选项的属性将被随机化或不随机化，例如data-randomize：

<select class="form-control" id="return-reason">
    <option data-randomize="false" value="" disabled="disabled" selected="selected">Please select...</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option data-randomize="false">Prefer not to say</option>
    <option data-randomize="false">Other</option>
</select>

然后你可以使用选择器$('#return-reason option:not([data-randomize])')获取你想要随机化的所有选项，将它们存储在一个数组中并循环遍历它们每次从数组中随机选项替换它在列表中然后删除它来自数组，所以你不会得到重复的选项。

希望这有帮助。

＆＃13;

//Get the list of options that we will randomize
var selector = '#return-reason option:not([data-randomize])';
var arr      = $(selector).map(function() {
  return $(this).html();
}).get();

//Randomize the list
$(selector).each(function() {
  var index = Math.floor(Math.random() * arr.length);

  $(this).text(arr[index]);
  arr.splice(index, 1);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="form-control" id="return-reason">
    <option data-randomize="false" value="" disabled="disabled" selected="selected">Please select...</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
    <option data-randomize="false">Prefer not to say</option>
    <option data-randomize="false">Other</option>
</select>

＆＃13;

Answer 2

如果您将选项构建到数组中......

var options = ["Option 1", "Option 2", ...];

...然后您可以使用how to shuffle an array in JavaScript的答案随机化您的选项，然后再将它们插入到select元素中。

选择下拉列表的随机部分

2 个答案: