Показать сообщение отдельно
  #2 (permalink)  
Старый 29.09.2022, 20:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

зависимые селекты по классу
ufaclub,
data-class логичнее использовать
<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let cover1 = document.querySelector("#mark1");
            let cover2 = document.querySelector("#mark2");
            let options = [...cover1.options];
            let opts = [...cover2.options];
            cover1.addEventListener("change", function() {
                let cls = options[this.selectedIndex].className;
                let up = [...opts].filter(({
                    classList
                }) => classList.contains(cls) || !cls);
                cover2.options.length = 0;
                cover2.append(...up)
            })
        })
    </script>
</head>

<body>
    <select id="mark1" name="cover1" size="5">
<option>select</option>
<option class="cs1" value="1">cs1</option>
<option class="cs1" value="2">cs1</option>
<option class="cs0" value="3">cs0</option>
<option class="cs2" value="4">cs2</option>
</select>
    <select id="mark2" name="cover2" size="5">
<option class="cs1" value="1">cs1</option>
<option class="cs1" value="2">cs1</option>
<option class="cs2" value="3">cs2</option>
<option class="cs2" value="4">cs2</option>
</select>
</body>

</html>
Ответить с цитированием