Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   javascript сортировка option и value по алфавиту (https://javascript.ru/forum/dom-window/74169-javascript-sortirovka-option-i-value-po-alfavitu.html)

mopsusha 19.06.2018 17:00

javascript сортировка option и value по алфавиту
 
На странице есть списки например

Код:

<select multiple="multiple">
        <option value="2" selected="selected">С отделкой</option>
        <option value="3">Без отделки</option>
</select>

<select multiple="multiple">
        <option value="2" selected="selected">Банан</option>
        <option value="3">Абрикос</option>
<option value="4">Зелень</option>
</select>


Как выстроить эти списки по алфавиту(с сохранением value и selected у option) при загрузке страницы, чтобы получалось так

Код:

<select multiple="multiple">
        <option value="3">Без отделки</option>
        <option value="2" selected="selected">С отделкой</option>
</select>

<select multiple="multiple">
    <option value="3">Абрикос</option>
        <option value="2" selected="selected">Банан</option>
        <option value="4">Зелень</option>
</select>


j0hnik 19.06.2018 17:15

<select multiple="multiple">
		<option value="2" selected="selected">С отделкой</option>
		<option value="3">Без отделки</option>
	</select>

	<select multiple="multiple">
		<option value="2" selected="selected">Банан</option>
		<option value="3">Абрикос</option>
		<option value="4">Зелень</option>
	</select>

	<script>
		document.querySelectorAll('select').forEach(sel=>{
			[...sel.children].sort((a,b)=> a.text > b.text ? 1 : a.text < b.text ? -1 : 0).forEach(el=>sel.appendChild(el));
		});
	</script>

рони 19.06.2018 17:23

mopsusha,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>

  <script>
document.addEventListener("DOMContentLoaded", function() {
    var select = document.querySelectorAll("select");
    [].forEach.call(select, function(sel) {
        [].slice.call(sel.options, 0).sort(function(a, b) {
            return a.text > b.text ? 1 : a.text < b.text ? -1 : 0
        }).forEach(function(o) {
            sel.appendChild(o)
        })
    })
});
</script>
</head>

<body>
<select multiple="multiple">
	<option value="2" selected="selected">С отделкой</option>
	<option value="3">Без отделки</option>
</select>

<select multiple="multiple">
	<option value="2" selected="selected">Банан</option>
	<option value="3">Абрикос</option>
<option value="4">Зелень</option>
</select>
</body>
</html>

рони 19.06.2018 17:25

j0hnik,
sort без return -1, не айс

j0hnik 19.06.2018 17:29

рони,
Какие нюансы?

рони 19.06.2018 17:31

Цитата:

Сообщение от j0hnik
Какие нюансы?

отсутствие сортировки, особенно в браузерах типа хром

j0hnik 19.06.2018 17:32

рони,
можете примерчик такого поведения черкануть?

рони 19.06.2018 17:35

j0hnik,
документации по sort, разве недостаточно?

j0hnik 19.06.2018 17:37

рони,
если не сложно уделите минутку... ;)

рони 19.06.2018 17:50

j0hnik,
<script>
var str = "12345678901234567890";
for (var i = 0; i < 50; i++) {
document.write("<br>"+str.split("").sort(function() {
   return Math.random() > 0.5
}).sort(function(a,b) {
   return a > b
})) //ожидаемый результат 0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9

}

  </script>


Часовой пояс GMT +3, время: 08:37.