Форум

рони · #11 (**permalink**) 16.02.2023, 11:03

Kramer778,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .hide {
            display: none;
        }

        .hide.show {
            display: block;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let select = document.querySelector('#main'),
                hide = document.querySelectorAll('.hide');
            let index = localStorage.show == undefined ? select.selectedIndex : localStorage.show;

            function change() {
                let div = document.querySelector('.hide.show');
                if (div) div.classList.remove('show');
                index = localStorage.show = select.selectedIndex;
                hide[index].classList.add('show')
            }
            select.addEventListener('change', change);
            hide[index].classList.add('show');
            select.options[index].selected = true;
        });
    </script>
</head>

<body>
    <select id="main" name="main" class="main_field" aria-required="true">
    <option value="one">
        Первая опция
    </option>
    <option value="two">
        Вторая опция
    </option>
    <option value="three" selected="selected">
        Третья опция
    </option>
</select>
    <hr>
    <div class="hide one">Для первого селекта</div>
    <div class="hide two">Для второго селекта</div>
    <div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>
</body>

</html>

Kramer778 · #12 (**permalink**) 16.02.2023, 12:40

Спасибо огромное!

Сообщение от рони

Kramer778,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .hide {
            display: none;
        }

        .hide.show {
            display: block;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let select = document.querySelector('#main'),
                hide = document.querySelectorAll('.hide');
            let index = localStorage.show == undefined ? select.selectedIndex : localStorage.show;

            function change() {
                let div = document.querySelector('.hide.show');
                if (div) div.classList.remove('show');
                index = localStorage.show = select.selectedIndex;
                hide[index].classList.add('show')
            }
            select.addEventListener('change', change);
            hide[index].classList.add('show');
            select.options[index].selected = true;
        });
    </script>
</head>

<body>
    <select id="main" name="main" class="main_field" aria-required="true">
    <option value="one">
        Первая опция
    </option>
    <option value="two">
        Вторая опция
    </option>
    <option value="three" selected="selected">
        Третья опция
    </option>
</select>
    <hr>
    <div class="hide one">Для первого селекта</div>
    <div class="hide two">Для второго селекта</div>
    <div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>
</body>

</html>

рони · #13 (**permalink**) 16.02.2023, 12:50

Kramer778,
копировать сообщения целиком не обязательно, это засоряет тему, и есть цитирование.

Kramer778 · #14 (**permalink**) 16.02.2023, 14:20

Хорошо, буду знать

Еще вопрос, а можно ли эти селекты дополнительно вывести в произвольном месте шаблона и чтобы они были взаимосвязаны и отображали содержимое выбора? Например выводим селекты в подвале:

<select id="main" name="main" class="main_field" aria-required="true">
    <option value="one">
        Первая опция
    </option>
    <option value="two">
        Вторая опция
    </option>
    <option value="three" selected="selected">
        Третья опция
    </option>
</select>

Возможно ли сделать, чтобы при выборе например "Вторая опция", выводилось "Для второго селекта" в изначальном месте и соответственно селект в изначальном месте тоже менялся на "Вторая опция"?

рони · #15 (**permalink**) 16.02.2023, 17:27

Kramer778,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .hide {
            display: none;
        }

        .hide.show {
            display: block;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let select = document.querySelectorAll('.main_field'),
                hide = document.querySelectorAll('.hide');
            let index = localStorage.show == undefined ? select[0].selectedIndex : localStorage.show;
            function change() {
                index = localStorage.show = this.selectedIndex;
                show(index);
            }
            function show(index)
            {  let div = document.querySelector('.hide.show');
               if (div) div.classList.remove('show');
               hide[index].classList.add('show');
               select.forEach(s => s.options[index].selected = true)

            }

            select.forEach(s => s.addEventListener('change', change));
            show(index);
        });
    </script>
</head>

<body>
    <select id="main" name="main" class="main_field" aria-required="true">
    <option value="one">
        Первая опция
    </option>
    <option value="two">
        Вторая опция
    </option>
    <option value="three" selected="selected">
        Третья опция
    </option>
</select>
    <hr>
    <div class="hide one">Для первого селекта</div>
    <div class="hide two">Для второго селекта</div>
    <div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>
<select id="main" name="main" class="main_field" aria-required="true">
    <option value="one">
        Первая опция
    </option>
    <option value="two">
        Вторая опция
    </option>
    <option value="three" selected="selected">
        Третья опция
    </option>
</select>
</body>

</html>

Kramer778 · #16 (**permalink**) 16.02.2023, 18:20

Гениально! Вы просто Мастер!

Только у меня возникла следующая проблема. Хотел от обратного продублировать и вывести получаемый контент в произвольном месте.

<div class="hide one">Для первого селекта</div>
    <div class="hide two">Для второго селекта</div>
    <div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>

Но из-за того, что в стилях стоит

.hide { display: none;}

дивы не отображаются. Случайно не знаете как можно решить данную задачу?

рони · #17 (**permalink**) 16.02.2023, 18:44

Kramer778,
не понимаю.

рони · #18 (**permalink**) 16.02.2023, 18:55

Kramer778,
возможно вы хотели это ...

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .hide {
            display: none;
            border: 1px solid red;
        }

        .hide.show {
            display: block;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let select = document.querySelectorAll('.main_field'),
                hide = document.querySelectorAll('.hide'),
                len = select[0].options.length;
            let index = localStorage.show == undefined ? select[0].selectedIndex : localStorage.show;
            function change() {
                index = localStorage.show = this.selectedIndex;
                show(index);
            }
            function show(index)
            {
               hide.forEach((e, i) => {e.classList.toggle('show', i % len == index)});
               select.forEach(s => s.options[index].selected = true)
            }

            select.forEach(s => s.addEventListener('change', change));
            show(index);
        });
    </script>
</head>

<body>  <div class="hide one">Для первого селекта</div>
    <div class="hide two">Для второго селекта</div>
    <div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>

    <select id="main" name="main" class="main_field" aria-required="true">
    <option value="one">
        Первая опция
    </option>
    <option value="two">
        Вторая опция
    </option>
    <option value="three" selected="selected">
        Третья опция
    </option>
</select>
    <hr>
    <div class="hide one">Для первого селекта</div>
    <div class="hide two">Для второго селекта</div>
    <div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>
<select id="main" name="main" class="main_field" aria-required="true">
    <option value="one">
        Первая опция
    </option>
    <option value="two">
        Вторая опция
    </option>
    <option value="three" selected="selected">
        Третья опция
    </option>
</select>
 <div class="hide one">Для первого селекта</div>
    <div class="hide two">Для второго селекта</div>
    <div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>

</body>

</html>

Kramer778 · #19 (**permalink**) 16.02.2023, 19:09

То что надо! Спасибо Вам большое, Вы сделали мой день

Bovem · #20 (**permalink**) 30.08.2023, 11:02

Сообщение от рони

Alexodiy,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .hide{
    display:none;
  }
  .hide.show{
    display: block;
  }

  </style>

  <script>
window.addEventListener('DOMContentLoaded', function() {
  var select = document.querySelector('#main'),
  hide = document.querySelectorAll('.hide');
  function change()
  {
    [].forEach.call(hide, function(el) {
           var add = el.classList.contains(select.value) ? "add" : "remove"
           el.classList[add]('show');
    });
  }
  select.addEventListener('change', change);
  change()
  });
  </script>
</head>

<body>
<select id="main" name="main" class="main_field" aria-required="true">
    <option value="one">
        Первая опция
    </option>
    <option value="two">
        Вторая опция
    </option>
    <option value="three" selected="selected">
        Третья опция
    </option>
</select>
<hr>
<div class="hide one">Для первого селекта</div>
<div class="hide two">Для второго селекта</div>
<div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>

</body>
</html>

Мне пригодился ваш код <script>
window.addEventListener('DOMContentLoaded', function() {
var select = document.querySelector('#main'),
hide = document.querySelectorAll('.hide');
function change()
{
[].forEach.call(hide, function(el) {
var add = el.classList.contains(select.value) ? "add" : "remove"
el.classList[add]('show');
});
}
select.addEventListener('change', change);
change()
});
</script> но он не работает, когда на одной странице три выпадающих списка выбора select. Как его исправить, чтобы работало с тремя select?

Форум

Справочник

Discord чат

Курсы javascript