Question

我有点陷入困境，所以我很感激任何帮助。我需要在一个简单的下拉列表中随机化列表项。我知道这里已有帖子处理这个，我尝试了其他解决方案也在这里发布，但他们并没有带来希望的结果。

我有一个简单的下拉列表，如下所示：

 <select>
      <option value="">Default</option>
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
 </select>

每次用户点击下拉列表时，我都需要对列表项进行不同的排序 - 但我不想设置该列表的值（！）。

因此，每当用户点击下拉列表时，我基本上都想要一个随机排序的列表项。加载页面时，下拉列表具有默认模式。用户点击下拉列表，项目列表打开 - 但每次以不同的随机顺序 - ，然后用户从该列表中选择一个项目。

最简单的方法是什么？对不起，如果这可能听起来微不足道，但我已经尝试了不同的方法，他们没有按预期工作。任何输入将不胜感激。

Answer 1

尝试使用此代码：

function shuffle() {
var list = document.getElementById('mySelect');   
var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
    if (items[i].nodeType == 1) { 
	itemsArr.push(items[i]);
    }
}

itemsArr.splice(0, 1); // remove the Default element from the array before sorting
itemsArr.sort(function(a, b) {
    return Math.random() > Math.random() ? 1 : -1;
});
var n=0; // count the number of default element in list to avoid adding more tha one
 //Append the Default element in the beginning of the list
for (i = 0; i<=list.length - 1; i++) {
    if (list.options[i].text=="Default") {
	n++;
    }
}
if(n==0){
    var option = document.createElement("option");
    option.text = "Default";
    list.add(option);
}
for (i = 0; i < itemsArr.length; ++i) {
    list.appendChild(itemsArr[i]);
}
}

<select id="mySelect" onblur="shuffle();">
  <option value="">Default</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Here's a demo.

随机选择列表项

1 个答案: