javascript - 随机选择下拉列表的一部分

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]);
}

我可以将“请选择”选项放在 HTML 列表的底部，并通过运行一个稍微修改过的循环，它会在“请选择”之后附加一个随机列表(减去“请选择”选项)。

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

但这仍然没有考虑到将“不想说”和“其他”选项保留在底部。我不完全确定我可以通过这种方式实现我的要求，而且感觉不对。

任何人都可以提出前进的方向。

为了我自己的目的，它不必是 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])') 来获取你想要随机化的所有选项，将它们存储在一个数组并遍历它们，每次从数组中随机选择一个选项将其替换在列表中，然后将其从数组中删除，这样您就不会得到重复的选项。

希望这对您有所帮助。

//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);
});

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