Обязательно сохраните JS, который заполняет элементы селектора (но сделайте так, чтобы ваша карта опций была известна еще до того, как пользователь что-нибудь выберет: не полагайтесь для этого на передачу по сети!), Но не Не пытайтесь заставить работать весь "условный показ" в JS: CSS уже может это сделать, и он сделает это лучше. Вам просто нужно не забыть использовать правильную разметку HTML:
// Load this script via src="..." with `async` and `defer` attributes
// so that it'll run before the user gets to interact with the page,
// after the DOM has been constructed. A feature that's been available
// since IE11, so there's no reason to still put scripts at the end of
// the page, or listening for DOMContentLoaded/ready events.
const first = document.getElementsByName('first-value')[0];
const second = document.getElementsByName('second-value')[0];
const initial = second.innerHTML;
// Either hard code this, or get it on page load, just make sure
// it's already available before users start picking values!
const optionMap = {
a: ['i', 'j', 'k'],
b: ['u', 'v', 'w'],
c: ['x', 'y', 'z'],
};
// Fill the first selector
Object.keys(optionMap).forEach(text => {
let option = document.createElement('option');
option.value = text;
option.textContent = text;
first.append(option);
});
// And only fill the second selector when we know the first value
first.addEventListener('change', evt => {
second.innerHTML = initial;
optionMap[evt.target.value].forEach(text => {
let option = document.createElement('option');
option.value = text;
option.textContent = text;
second.append(option);
});
});
select:not(:valid) {
border: 1px solid red;
}
select:not(:valid) + .followup {
display: none;
}
<select required name="first-value">
<option disabled selected>please select one</option>
</select>
<select required class="followup" name="second-value">
<option disabled selected>please select one more</option>
</select>
Хитрость здесь в том, чтобы убедиться, что у вас есть вариант, который является одновременно disabled и selected. Последнее, потому что <select> элементы всегда имеют выбранный параметр, но любой вариант, помеченный как disabled, не считается допустимым выбором (это позволяет вам, например, помещать метки в элемент селектора).
Итак, мы создаем первый <option>, который является просто меткой, но также проверяем, что селектор всегда запускается с выбранной опцией. Поскольку это disabled, это делает селектор недействительным в том, что касается публикации формы, поэтому мы можем использовать псевдокласс CSS :valid для выполнения всевозможных полезных вещей, таких как скрытие любого элемента с классом followup до тех пор, пока его предыдущий элемент не станет действительным.
И, конечно, вы все равно можете «заполнить» второй селектор, используя JS, с прослушивателем событий на первом селекторе, чтобы его change запускал некоторые JS, которые добавляет кучу option элементов ко второму, но это действительно то, что вы хотите сделать без сетевого запроса: пусть ваш код уже знает, какие первичные значения сопоставляются с какими массивами вторичных значений, выполнив выборку для полного сопоставления при загрузке страницы или даже в жестком коде (например, на этапе создания сайта или даже вручную)