Показать сообщение отдельно
  #2 (permalink)  
Старый 18.01.2020, 14:05
Аватар для Esm1nec
Новичок на форуме
Отправить личное сообщение для Esm1nec Посмотреть профиль Найти все сообщения от Esm1nec
 
Регистрация: 18.03.2018
Сообщений: 8

Для третьего селекта прикрутил:
onchange="if (this.value) window.location.href = this.value"


и в коде дописал фрагмент, чтобы при создании <option> добавлялся атрибут value

var urls = document.querySelectorAll('#select-3 > option:not(:first-child');
    for (j = 0; j < urls.length; ++j) {
    urls[j].setAttribute('value', ' ');
}


Вопрос: как теперь value для каждого option из массива (см. конец скрипта) задать также массивом?


<div class="chained-selects">
             	<select id="select-1">
	            	<option selected>Choose level 1 option</option>
	            	<option>1</option>
	            	<option>2</option>
	            	<option>3</option>
            	</select>
            	<select id="select-2" disabled>
	            	<option selected>Choose level 2 option</option>
            	</select>
            	<select id="select-3" onchange="if (this.value) window.location.href = this.value" disabled >
	            	<option selected>Choose level 3 option</option>
            	</select>
            </div>



var options = generateOptions();

            document.querySelector('.chained-selects').addEventListener('change', onChange, false);

            function onChange(e) {
            	e.stopPropagation();
	
	            var s = e.target;
	
            	if (!s.nextElementSibling)
	            	return;
		
	            var next = s.nextElementSibling;
		
            	if (s.selectedIndex === 0)
	            	deactivateBoxes(next);
            	else {
	            	var path = [];
		            for (var p = s; p; p = p.previousElementSibling) {
		            	var selOptNode = p.options[p.selectedIndex];
		            	path.push(selOptNode.value);
		            }
	            	path.reverse();
		
		            var children = path.reduce(
		            	function(o, optName) {
			            	return o[optName];
		            	},
		            	options
	            	);
		
		            children = Object.keys(children);
		
	            	// Insert children in s.nextChild
		            	for (var q = next.firstElementChild.nextElementSibling; q; q = nextq) {
			            	nextq = q.nextElementSibling;
			            	next.removeChild(q);
		            	}
		            	for (var i = 0; i < children.length; ++i) {
				            var optEl = document.createElement('option');
			            	optEl.innerHTML = children[i];
			            	next.appendChild(optEl);
			            	
			            	/**/
			        var urls = document.querySelectorAll('#select-3 > option:not(:first-child');
                                    for (j = 0; j < urls.length; ++j) {
                                    urls[j].setAttribute('value', ' ');
                                }
			            	/**/
			            	
			            }
		
		            next.selectedIndex = 0;
	            	next.disabled = false;
		
		            deactivateBoxes(next.nextElementSibling);
            	}
            }
            
            function deactivateBoxes(s) {
            	while (s) {
	            	s.selectedIndex = 0;
	            	s.disabled = true;
		
	            	s = s.nextElementSibling;
            	}
            }

            function generateOptions() {
	            return {
		            '1': {
		            	'1-1': {
			            	'1-1-1': null,
			            	'1-1-2': null
		            	},
			            '1-2': {
			            	'1-2-1': null,
				            '1-2-2': null,
				            '1-2-3': null,
			            	'1-2-4': null,
		            	},
		            	'1-3': {
			            	'1-3-1': null,
			            	'1-3-2': null,
			            	'1-3-3': null,
			            	'1-3-4': null,
			            	'1-3-5': null,
		            	}
	            	},
	            	'2': {
		            	'2-1': {
			            	'2-1-1': null,
				            '2-1-2': null
		            	},
		            	'2-2': {
			            	'2-2-1': null,
			            	'2-2-2': null,
			            	'2-2-3': null,
			            	'2-2-4': null,
			            },
		            	'2-3': {
			            	'2-3-1': null,
			            	'2-3-2': null,
			            	'2-3-3': null,
				            '2-3-4': null,
			            	'2-3-5': null,
		            	}
	            	},
	            	'3': {
		            	'3-1': {
			            	'3-1-1': null,
			            	'3-1-2': null
			            },
			            '3-2': {
			            	'3-2-1': null,
			            	'3-2-2': null,
			            	'3-2-3': null,
			            	'3-2-4': null,
		            	},
		            	'3-3': {
				            '3-3-1': null,
				            '3-3-2': null,
				            '3-3-3': null,
			            	'3-3-4': null,
			            	'3-3-5': null,
		            	}
	            	}
            	};
            }

Последний раз редактировалось Esm1nec, 18.01.2020 в 14:11.
Ответить с цитированием