Javascript-форум - связать два select по атрибуту class (выбранного первого option)

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - связать два select по атрибуту class (выбранного первого option) (https://javascript.ru/forum/jquery/84491-svyazat-dva-select-po-atributu-class-vybrannogo-pervogo-option.html)

связать два select по атрибуту class (выбранного первого option)

<select id="mark1" name="cover1">
<option class="cs1" value="1">****</option>
<option class="cs1" value="2">****</option>
<option class="cs0" value="3">****</option>
<option class="cs0" value="4">****</option>
</select>


<select id="mark2" name="cover2">
<option class="cs1" value="1">****</option>
<option class="cs1" value="2">****</option>
<option class="cs2" value="3">****</option>
<option class="cs2" value="4">****</option>
</select>

чтобы при выборе option в select id="mark1" например с class="cs1"

<option class="cs1" value="1">****</option>

во втором селекте id="mark2" остались только варианты с таким же class="cs1"

а остальные были скрыты?

Подскажите пожалуйста, пытался реализовать через плагин jquery chained selects

но там выбор идет по value а мне нужно именно по class

зависимые селекты по классу

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>

ufaclub,
тоже самое с атрибутом data-...

<!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].dataset.class;
                let up = opts.filter(({
                    dataset
                }) => dataset.class === cls || !cls);
                cover2.options.length = 0;
                cover2.append(...up)
            })
        })
    </script>
</head>

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

</html>