我有点陷入困境,所以我很感激任何帮助。我需要在一个简单的下拉列表中随机化列表项。我知道这里已有帖子处理这个,我尝试了其他解决方案也在这里发布,但他们并没有带来希望的结果。
我有一个简单的下拉列表,如下所示:
<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>
每次用户点击下拉列表时,我都需要对列表项进行不同的排序 - 但我不想设置该列表的值(!)。
因此,每当用户点击下拉列表时,我基本上都想要一个随机排序的列表项。加载页面时,下拉列表具有默认模式。用户点击下拉列表,项目列表打开 - 但每次以不同的随机顺序 - ,然后用户从该列表中选择一个项目。
最简单的方法是什么? 对不起,如果这可能听起来微不足道,但我已经尝试了不同的方法,他们没有按预期工作。任何输入将不胜感激。
答案 0 :(得分:0)
尝试使用此代码:
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>