16.02.2023, 11:03
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
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>
|
|
16.02.2023, 12:40
|
|
Новичок на форуме
|
|
Регистрация: 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>
|
|
|
16.02.2023, 12:50
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Kramer778,
копировать сообщения целиком не обязательно, это засоряет тему, и есть цитирование.
|
|
16.02.2023, 14:20
|
|
Новичок на форуме
|
|
Регистрация: 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>
Возможно ли сделать, чтобы при выборе например "Вторая опция", выводилось "Для второго селекта" в изначальном месте и соответственно селект в изначальном месте тоже менялся на "Вторая опция"? |
|
16.02.2023, 17:27
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
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.02.2023, 18:20
|
|
Новичок на форуме
|
|
Регистрация: 16.02.2023
Сообщений: 5
|
|
Гениально! Вы просто Мастер!
Только у меня возникла следующая проблема. Хотел от обратного продублировать и вывести получаемый контент в произвольном месте.
<div class="hide one">Для первого селекта</div>
<div class="hide two">Для второго селекта</div>
<div class="hide three">Для третьего селекта, опция выбрана изначально. Надо что бы этот блок отображался сразу.</div>
Но из-за того, что в стилях стоит
.hide { display: none;}
дивы не отображаются. Случайно не знаете как можно решить данную задачу? |
|
16.02.2023, 18:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Kramer778,
не понимаю.
|
|
16.02.2023, 18:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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.
Причина: добавлена запятая
|
|
16.02.2023, 19:09
|
|
Новичок на форуме
|
|
Регистрация: 16.02.2023
Сообщений: 5
|
|
То что надо! Спасибо Вам большое, Вы сделали мой день  |
|
30.08.2023, 11:02
|
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
|
|
