19.06.2018, 17:00
|
|
Интересующийся
|
|
Регистрация: 21.01.2011
Сообщений: 15
|
|
|
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> |
|
|
19.06.2018, 17:15
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<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>
Последний раз редактировалось j0hnik, 19.06.2018 в 18:13.
|
|
19.06.2018, 17:23
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
j0hnik,
sort без return -1, не айс
|
|
19.06.2018, 17:29
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
рони,
Какие нюансы?
|
|
19.06.2018, 17:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от j0hnik
|
|
Какие нюансы?
|
отсутствие сортировки, особенно в браузерах типа хром |
|
19.06.2018, 17:32
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
|
рони,
можете примерчик такого поведения черкануть?
|
|
19.06.2018, 17:35
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
j0hnik,
документации по sort, разве недостаточно?
|
|
19.06.2018, 17:37
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
рони,
если не сложно уделите минутку... 
|
|
19.06.2018, 17:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
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>
|
|
|
|
