MrNix21
@MrNix21

Как преобразовать список ul в select с помощью JQuery?

Здравствуйте. Есть такой ненумерованный список:
<ul>
	<li><a href="">Телефоны</a>
		<ul>
			<li><a href="">Apple</a>
				<ul>
					<li><a href="">iPhone 4</a></li>
					<li><a href="">iPhone 5</a></li>
				</ul>
			</li>
			<li><a href="">Samsung</a>
				<ul>
					<li><a href="">Samsung A3</a></li>
					<li><a href="">Samsung A5</a></li>
				</ul>
			</li>
			<li><a href="">Sony</a>
				<ul>
					<li><a href="">Sony Xperia XA1</a></li>
					<li><a href="">Sony Xperia XA2</a></li>
					<li><a href="">Sony Xperia XA3</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="">Планшеты</a>
		<ul>
			<li><a href="">Apple</a>
				<ul>
					<li><a href="">iPad</a></li>
					<li><a href="">iPad 2</a></li>
				</ul>
			</li>
			<li><a href="">Samsung</a>
				<ul>
					<li><a href="">Samsung Tab 2</a></li>
					<li><a href="">Samsung Tab 3</a></li>
					<li><a href="">Samsung Tab 4</a></li>
				</ul>
			</li>
			<li><a href="">LG</a>
				<ul>
					<li><a href="">LG v490</a></li>
					<li><a href="">LG v500</a></li>
				</ul>
			</li>
		</ul>
	</li>
</ul>

Как этот список преобразовать в пошаговые select(-ы)? Т.е. сначала выбираем "Тип устройства", потом для этого типа устройства выбираем производителя, потом для этого производителя выбираем модель. Получается 3 select(-a):
1. Тип устройства
2. Производитель
3. Модель
После выбора последнего select нас должно перекидывать на выбранную страницу. Как это можно сделать с помощью JQuery или JS? Может кто-то решал уже такие задачи? Заранее благодарю за помощь.
  • Вопрос задан
  • 700 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Сначала надо данные select'ов сложить во вложенную структуру, подобную текущему списку: массив объектов, каждый из которых содержит значение пункта select'а и аналогичный массив, описывающий следующий select.

Изначально доступен только первый select (остальные скрыты, неактивны, не имеют option'ов или их вообще нет).

При выборе значения в select'е все select'ы, которые расположены за ним - удаляются, скрываются, деактивируются или обнуляются. Из оставшихся извлекаются значения, которые используются для поиска массива, описывающего следующий select. Берём одно значение, ищем в массиве данных select'ов объект с соответствующим значением. Нашли - берём следующее значение и вложенный массив найденного объекта. Повторяем до тех пор, пока значения не закончатся. Последний полученный массив используется для создания или заполнения option'ами следующего select'а - если он (массив) есть и непустой. В противном случае было выбрано значение в последнем возможном select'е, можно на основе полного комплекта значений предпринять какое-то действие.

https://jsfiddle.net/uy3t4d1b/
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Часть ответа есть здесь
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы