javascript сортировка option и value по алфавиту
На странице есть списки например
Код:
<select multiple="multiple">Как выстроить эти списки по алфавиту(с сохранением value и selected у option) при загрузке страницы, чтобы получалось так Код:
<select multiple="multiple"> |
<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>
|
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>
|
j0hnik,
sort без return -1, не айс |
рони,
Какие нюансы? |
Цитата:
|
рони,
можете примерчик такого поведения черкануть? |
j0hnik,
документации по sort, разве недостаточно? |
рони,
если не сложно уделите минутку... ;) |
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>
|
рони,
спасибо, вник в суть, к массивам больше 10 ячеек v8 применяет какую-то оптимизацию. |
j0hnik,
да, да наплевать на документацию, это Google Chrome и Internet Explorer плохие, раз придерживаются правил ))) |
рони,
IE придерживается и даж поддержка новых стандартов появляется спустя 3-4 года, а так да, хороший арбуз! |
j0hnik,
c return -1 работает везде <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 ? 1 : a < b ? -1 : 0
})) //ожидаемый результат 0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9
}
</script>
|
рони, да знаю
|
:write: :) или так
<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 || -(a < b)
})) //ожидаемый результат 0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9
}
</script>
|
рони,
а почему бы не так тогда (7-я строка)?)) return a > b || -1 |
:lol: или так
<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.localeCompare(b,"ru")
})) //ожидаемый результат 0,0,1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9
}
</script>
|
Цитата:
|
а зачем? Поменяются местами 5 и 5, это же не ошибка
|
Цитата:
|
Цитата:
|
Ну тогда так)):
return a - b; |
Цитата:
|
Manyasha,
Array/sort |
Manyasha,
<script>
var stringArray = ['Банан', 'Абрикос', 'Зелень'];
stringArray.sort(function(a,b) {
return a - b
})
document.write(stringArray + " false <br>")
stringArray.sort() //по умолчанию сортировка строк a > b ? 1 : a < b ? -1 : 0
document.write(stringArray + " true")
</script>
|
Цитата:
маленькие массивы сортируются каким-то другим методом, который быстрее если мало элементов. |
Alexandroppolus,
наоборот, для маленьких оптимизации нет, для больших есть. помните эту кату с самописным реверсом?? |
j0hnik,
помню, только она тут не при чем. на больших массивах быстрая сортировка уделывает все остальные, потому что она асимптотически выгоднее. На маленьких асимптотика работает слегка по другому (разница между n*n и n*ln(n) копеечная, в итоге начинают рулить коэффициенты), и какой-нибудь "пузырёк" может оказаться быстрее. а так - оптимизация есть в обоих случаях. Ну и что, что массив маленький. А если надо отсортировать миллион таких маленьких? потому всё ускорено по максимуму |
https://jsperf.com/45435435tret больший по размерам массив сортируется быстрей. в хроме
console.log([0,1,2,3,4,5,6,7,8,9].sort((a,b)=>b)); //логичное поведение console.log([0,1,2,3,4,5,6,7,8,9,1].sort((a,b)=>b)); //не логичное |
Alexandroppolus,
может и есть но, с маленьким вроде все логично выводит, а там пытается "хитрить" |
Цитата:
var a = ['11-05-2018', '12-05-2017', '10-04-2017'];
a.sort();
alert(a);
alert('12-05-2017' > '11-05-2018')
Опасно так все строки сортировать ;) |
laimas,
ты сортируешь строки, а результат хочешь как от даты, в строках "8" больше чем "20" |
Цитата:
Такие же проблемы могут быть и просто с числами (уберите дефисы, результат не лучше будет, так как это строки). А есть еще понятие "натуральная сортировка", в JS готовой функции для нее тоже нет. |
laimas,
не осилил |
Цитата:
Ну например есть массив имен файлов, которые надо отсортировать: var a = ["img12.png", "img10.png", "img2.png", "img1.png"]; a.sort(); alert(a); и получим не то чего бы хотелось - img1.png, img2.png, img10.png, img12.png. Проблема в том, что сравнение a > b будет косячит с числами. |
laimas,
спасибо, но я пас. |
Цитата:
var a = ["img12.png", "img10.png", "img2.png", "img1.png"];
a.sort(function(a,b) {
return a.match(/\d+/)[0] - b.match(/\d+/)[0]
});
alert(a);
|
Цитата:
Проверьте свой код с таким, например, массивом: ["iag12.png", "iq10.png", "img2.png", "img1.png"] - с цифрами все будет Ок, но ведь не верно же будет. ) |
Цитата:
|
| Часовой пояс GMT +3, время: 23:57. |