Рандомизированный список элементов списка

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) { 
 
\t 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") { 
 
\t 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.