Как поменять последний выпадающий список на кнопку поиска?

Question

[VampireFang]

Есть готовый рабочий код. Подскажите, пожалуйста, как изменить последний выпадающий список на кнопку "найти", а так же сделать, чтобы эту кнопку можно было нажать при выборе значения хотя бы в одном выпадающем списке.
HTML-код:

<div class="chained-selects">
  <select class="app-select form-control">
    <option selected>Выберите марку</option>
  </select>						    
  <select class="app-select form-control" disabled>
    <option selected>Выберите модель</option>
  </select>						    
  <select class="app-select form-control"disabled>
    <option selected>Выберите кузов</option>
  </select>    										    						  
</div>

JS-код:

const options = generateOptions();
const chainedSelects = document.querySelector(".chained-selects");
chainedSelects.addEventListener("change", onChange, false);
draw(chainedSelects.firstChild, options);

function onChange(event) {
	const { target } = event;
	let node = target, path = [];

	while (node = node.nextElementSibling) {
		node.length = 1;
		node.disabled = true;
	}

	if (target.selectedIndex === 0) return;

	node = target;
	do path.push(node.value);
	while (node = node.previousElementSibling);

	if (target.nextElementSibling) {
		const option = path.reduceRight((option, property) => option[property], options);
		draw(target, option);
	} else {
		const option = path.slice(1).reduceRight((option, property) => option[property], options);
		const value = option[target.value];
		if (value == null) return;
		location.href = value.url || value;
	}
}

function draw(target, option) {
	for (const [property, value] of Object.entries(option))
		target.nextElementSibling.add(new Option(property, property));
	target.nextElementSibling.disabled = false;
}

function generateOptions() {
	return {
		"AUDI": {
			"80": {
				"B3": {
					url: "p1.html"
				},
				"B4": {
					url: "p2.html"
				}
			},
			"100": {
				"C3": {
					url: "p3.html"
				},
				"C4": {
					url: "p4.html"
				}
			}
		},
		"BMW": {
			"3 series": {
				"E30": {
					url: "p13.html"
				},
				"E36": {
					url: "p14.html"
				},
				"E46": {
					url: "p15.html"
				}
			},
			"5 series": {
				"E34": {
					url: "p16.html"
				},
				"E39": {
					url: "p17.html"
				},
				"E60": {
					url: "p18.html"
				}
			}
		}		
	};
}

Comments

[Сергей Сергей]

Кнопку можно в разметке поставить позади селектов, а разрешение на кнопку давать вместе с проверкой выбора в onChange.

[VampireFang]

Сергей Сергей, Спаcибо за ваш ответ. Если не трудно, то можете, пожалуйста, написать js-код с изменениями?

Answer 1

[VampireFang]

Может пригодится кому-то

document.addEventListener("DOMContentLoaded", function() {
            function generateOptions() {
                return {
                    "AUDI": {
                        "80": {
                            url: "p80.html"
                        },
                        "100": {
                            url: "audi100.html"
                        },
                        "url": "AUDI.html"
                    },
                    "BMW": {
                        "3 series": {
                            url: "p3.html"
                        },
                        "5 series": {
                            url: "p5.html"
                        },
                        "url": "BMW.html"
                    },
                    "url": "All.html"
                };
            }
            const elem = document.querySelector(".chained-selects");
            const selects = Array.from(elem.querySelectorAll("select"));
            const getOptions = (obj, path = []) => Object.keys(path.reduce((obj, key) => obj[key], obj)).filter(key => key !== "url");
            const createOptions = (target, options) => target.append(...options.map(i => new Option(i, i)));
            let options = getOptions(generateOptions());
            let target = selects[0];
            createOptions(target, options);
            const change = ({
                target
            }) => {
                let disabled = false,
                    path = [],
                    last;
                for (let select of selects) {
                    let value = select.value;
                    select.disabled = disabled;
                    if (disabled) select.options.length = 1;
                    if (target === select) {
                        last = true;
                    } else if (!disabled && last) {
                        select.options.length = 1;
                        let options = getOptions(generateOptions(), path);
                        createOptions(select, options);
                    };
                    if (select.selectedIndex === 0) disabled = true;
                    else path.push(value);
                }
            }
            elem.addEventListener("change", change);
            elem.querySelector("button").addEventListener("click", () => {
                let obj = generateOptions();
                for (let {
                        value
                    } of selects) {
                    if (value in obj) obj = obj[value];
                    else {
                        if ("url" in obj) break;
                        value = Object.keys(obj)[0];
                        obj = obj[value];
                    }
                }
                location.href = obj.url
            });
        })