Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.06.2018, 17:00
Интересующийся
Отправить личное сообщение для mopsusha Посмотреть профиль Найти все сообщения от mopsusha
 
Регистрация: 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>
Ответить с цитированием
  #2 (permalink)  
Старый 19.06.2018, 17:15
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 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.
Ответить с цитированием
  #3 (permalink)  
Старый 19.06.2018, 17:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,802

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>
Ответить с цитированием
  #4 (permalink)  
Старый 19.06.2018, 17:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,802

j0hnik,
sort без return -1, не айс
Ответить с цитированием
  #5 (permalink)  
Старый 19.06.2018, 17:29
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
Какие нюансы?
Ответить с цитированием
  #6 (permalink)  
Старый 19.06.2018, 17:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,802

Сообщение от j0hnik
Какие нюансы?
отсутствие сортировки, особенно в браузерах типа хром
Ответить с цитированием
  #7 (permalink)  
Старый 19.06.2018, 17:32
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
можете примерчик такого поведения черкануть?
Ответить с цитированием
  #8 (permalink)  
Старый 19.06.2018, 17:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,802

j0hnik,
документации по sort, разве недостаточно?
Ответить с цитированием
  #9 (permalink)  
Старый 19.06.2018, 17:37
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
если не сложно уделите минутку...
Ответить с цитированием
  #10 (permalink)  
Старый 19.06.2018, 17:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,802

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JavaScript - Option, результаты из выпадающего меню. Результаты с большим количеством voron1990 Общие вопросы Javascript 3 30.04.2015 09:04
Сортировка таблицы по алфавиту dozer Events/DOM/Window 6 17.10.2014 23:22
как с помощью javascript установить selected для тега option? re-kru-t Общие вопросы Javascript 1 19.02.2011 14:49
Последние книги по JavaScript! monolithed Учебные материалы 7 26.10.2010 18:40
Выдвет ошибку JavaScript Ромио Opera, Safari и др. 4 21.10.2010 19:34