Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.02.2023, 11:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

localStorage remember the index
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>
Ответить с цитированием
  #12 (permalink)  
Старый 16.02.2023, 12:40
Новичок на форуме
Отправить личное сообщение для Kramer778 Посмотреть профиль Найти все сообщения от Kramer778
 
Регистрация: 16.02.2023
Сообщений: 5

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

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Kramer778,
копировать сообщения целиком не обязательно, это засоряет тему, и есть цитирование.
Ответить с цитированием
  #14 (permalink)  
Старый 16.02.2023, 14:20
Новичок на форуме
Отправить личное сообщение для Kramer778 Посмотреть профиль Найти все сообщения от Kramer778
 
Регистрация: 16.02.2023
Сообщений: 5

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

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

synchronous selects
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>
Ответить с цитированием
  #16 (permalink)  
Старый 16.02.2023, 18:20
Новичок на форуме
Отправить личное сообщение для Kramer778 Посмотреть профиль Найти все сообщения от Kramer778
 
Регистрация: 16.02.2023
Сообщений: 5

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

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

<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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Kramer778,
не понимаю.
Ответить с цитированием
  #18 (permalink)  
Старый 16.02.2023, 18:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>

Последний раз редактировалось рони, 16.02.2023 в 19:45. Причина: добавлена запятая
Ответить с цитированием
  #19 (permalink)  
Старый 16.02.2023, 19:09
Новичок на форуме
Отправить личное сообщение для Kramer778 Посмотреть профиль Найти все сообщения от Kramer778
 
Регистрация: 16.02.2023
Сообщений: 5

То что надо! Спасибо Вам большое, Вы сделали мой день
Ответить с цитированием
  #20 (permalink)  
Старый 30.08.2023, 11:02
Новичок на форуме
Отправить личное сообщение для Bovem Посмотреть профиль Найти все сообщения от Bovem
 
Регистрация: 30.08.2023
Сообщений: 2

Помогите пожалуйста
Сообщение от рони Посмотреть сообщение
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?

Последний раз редактировалось Bovem, 30.08.2023 в 11:09.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Не корретная работа выбора элемента в динамическом <select> CTABP Элементы интерфейса 3 19.09.2017 15:24
Изменение цвета элемента в зависимости от id элемента на координате deniskutovskiy Events/DOM/Window 10 10.10.2015 11:43
Вывод информации в зависимости от выбранных значений select Batyabest Events/DOM/Window 1 01.10.2014 05:20
Динамическое отображение контента на 2ой странице, в зависимости от выбора на 1ой Volchen0ck Events/DOM/Window 2 14.05.2014 16:01
html код в зависимости от выбора radio Findail Общие вопросы Javascript 6 30.03.2013 12:53