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

Question

[Никита]

Здравствуйте. Есть такой ненумерованный список:

<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? Может кто-то решал уже такие задачи? Заранее благодарю за помощь.

Answer 1

[0xD34F]

Сначала надо данные select'ов сложить во вложенную структуру, подобную текущему списку: массив объектов, каждый из которых содержит значение пункта select'а и аналогичный массив, описывающий следующий select.

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

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

https://jsfiddle.net/uy3t4d1b/

Answer 2

[Александр]

Часть ответа есть здесь

Comments

[Никита]

Александр, спасибо за ответ. Да, я находил эту страницу, но там задача немного другая. Там ul переделывается в один select с optgroup. Мне же надо один ul со вложенными ul разделить на три select. Т.е. вот какая логика: Сначала выбираем тип устройства, далее во втором select в option подставляются производители которые присущи этому типу устройства. Далее в третьем select в option уже подставляются те модели, которые присущи выбранному производителю. Как действовать в этом случае?