js добавление элемента option при условии

Question

сделал добавление при клике на select второго option, при условии что первый option равен тексту. Он работает но при нажатии на другой селект, он удаляет второй option у другого селекта. Помогите понять почему так происходит.

let newOption = new Option("Не выполнено");
let newOpt = new Option("Выполнено")
let sel = document.querySelectorAll('.select');
for (let s = 0; s < sel.length; s++) {
    sel[s].addEventListener('click', function () {
        let opt = sel[s].querySelectorAll('.option');
        for (let a = 0; a < opt.length; a++)
            if (opt[a].text == 'Выполнено') {
                sel[s].append(newOption)
            } else {
                sel[s].append(newOpt)
            }
    })
}

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
    <title>Таблица принтеры</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

    <section>
   <select class="select">
   <option class ="option">Не выполнено</option>
   </select>
             <select class="select">
   <option class ="option">Не выполнено</option>
   </select>
   

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>

Answer 1

let sel = document.querySelectorAll('.select');
for (let s = 0; s < sel.length; s++) {
    let newOption = new Option("Не выполнено");
    let newOpt = new Option("Выполнено")
    sel[s].addEventListener('click', function () {
        let opt = sel[s].querySelectorAll('.option');
        for (let a = 0; a < opt.length; a++) {
            if (opt[a].text == 'Выполнено') {
                sel[s].append(newOption)
            } else {
                sel[s].append(newOpt)
            }
        }
    })
}

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">
    <title>Таблица принтеры</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>

    <section>
   <select class="select">
   <option class ="option">Не выполнено</option>
   </select>
             <select class="select">
   <option class ="option">Не выполнено</option>
   </select>
   

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

</body>
</html>

БЛОГ НА HUSL

js добавление элемента option при условии

Ответы (1 шт):