Как при переходе на другую страницу сохранять выбранное значение select?

Question

[Keit265]

Сейчас использую вот этот скрипт для сохранения выбранного select на следующую страницу: https://jsfiddle.net/QW01_01/5und7600/
Но с помощью этого скрипта можно подключить лишь один select, значение второго я никак не мог запомнить. Я не силён в скриптах, поэтому переделать его так, чтобы можно было сохранять значение не одного, а двух select'ов у меня не получилось. Кто сможет сделать так, чтобы можно было сохранять значение 2 или более селектов на одной странице и переносить их значения на другую?

Answer 1

[Stalker_RED]

Нужно для каждого запоминаемого элемента свой ключ устанавливать.

С чекбоксами разбирайтесь сами, принцип тот-же, только checked выставить. С радио сложнее немножко.

Comments

[Keit265]

Не много не понял. У меня есть два select на одной странице

И два на следующей точно такие же

Не могу разобраться с кодом скрипта. Как мне на другой странице получается указать первый селект? id ведь я повторить не могу, переделать под класс?

[Stalker_RED]

Keit265,

Не могу разобраться с кодом

там две функции по пять строк. Одна сейфит, другая загружает. Что именно непонятно? Я расскажу.

Как мне на другой странице получается указать первый селект?

не понял, что вы собрались указывать.
Сейчас скрипт берет у селекта id или name и значение. И сохраняет в localStorage (загляните что там)
При загрузке страницы ищет такие элементы (по id или по name), и если найдет - устанавливает им эти-же значения.

id ведь я повторить не могу

эм... у вас же id на другой странице

[Keit265]

Если я получается поставлю на первой странице селект и на другой странице точно такой же с таким именем, то при загрузке другой страницы значение с первой сохранится?

<select name="foo">
    <option value="1">Борода</option>
    <option value="2">Усы</option>
    <option value="3">Расчестка</option>
    <option value="4">Карлосон</option>
</select>
<select name="foo">
    <option value="1">Борода</option>
    <option value="2">Усы</option>
    <option value="3">Расчестка</option>
    <option value="4">Карлосон</option>
</select>

Я сделал так, как описал, и почему-то оно не сработало
Вот код с первой страницы:

<?php
	$categories = get_terms('direction', 'orderby=name&hide_empty=0');
	if($categories){
		echo '<select name="foo" id="direction1"><option value="card-item">Любое</option>';
		foreach ($categories as $cat){
			echo "<option value='direction-{$cat->term_id}'>{$cat->name}</option>";
		}
		echo '</select>';
	}
?>

А вот такой же код с другой страницы

<?php
$categories = get_terms('direction', 'orderby=name&hide_empty=0');
if($categories){
	echo '<select name="foo"><option value="card-item">Любая</option>';
	foreach ($categories as $cat){
		echo "<option value='direction-{$cat->term_id}'>{$cat->name}</option>";
	}
	echo '</select>';
}
?>

Селекты с таким же именем и значением, но на другой странице, почему-то не ставится значение с предыдущей

[Stalker_RED]

Keit265, посмотри наконец уже код.
Оно сохраняет по id ИЛИ имени
У тебя в первом случае id есть, в втором - нету.
Можешь подправить, чтоб сохраняло по чему-то одному. Или по id и по имени одновременно. Или по классу. Или по data-аттрибуту. Тыж программист, ну!

[Keit265]

Stalker_RED,

Оно сохраняет по id ИЛИ имени

Cначала я убрал id и оставил только имя на обоих select - не сработало.
Потом я решил написать так: const key = elem.getAttribute("name"); ,чтобы сохранялось только по name(но это не точно), но это тоже не сработало.

Можешь подправить, чтоб сохраняло по чему-то одному. Или по id и по имени одновременно

По id ведь оно не может стоять одновременно, потому что id не может повторяться у двух селектов.
Я не понимаю в чём проблема. И спасибо за сдержанность и за то, что вы всё равно продолжаете мне отвечать, хоть я, возможно, конкретно туплю)

[Stalker_RED]

Keit265, у вас один select на одной странице, а второй на другой странице, верно? id должен быть уникальным в пределах страницы. Если на другой странице будет элемент с таким-же id - ничего страшного не произойдет.

Cначала я убрал id и оставил только имя на обоих select - не сработало

вот с этого места подробнее. Скрипт был подключен на обоих страницах? имя точно одинаковое? в localStorage есть запись?

[Keit265]

Stalker_RED, я вывел localstorage в консоль и вот, что мне показало:
Storage {test_select_value: "level-5358", aam-subject: "{"type":"role","id":"subscriber","name":"Подписчик","level":0}", DataTables_user-list_/wp-admin/admin.php: "{"time":1593871669223,"start":0,"length":10,"order…rt":true,"regex":false,"caseInsensitive":true}}]}", acf: "{"tabs-options":[6]}",
select: "{"select-1":"level-5358","select-2":"direction-5579"}", …}
Вот, что я выбрал на предыдущей странице:

Значение не подставляется почему-то на следующую страницу.
Скрипт подключён и самый первый обрабатывается из всех.
Вот код с первой страницы:

<?php
$categories = get_terms('direction', 'orderby=name&hide_empty=0');
if($categories){
	echo '<select name="foo"><option value="card-item">Любая</option>';
	foreach ($categories as $cat){
		echo "<option value='direction-{$cat->term_id}'>{$cat->name}</option>";
	}
	echo '</select>';
}
?>

И код со второй страницы:

<?php
	$categories = get_terms('direction', 'orderby=name&hide_empty=0');
	if($categories){
		echo '<select name="foo"><option value="card-item">Любое</option>';
		foreach ($categories as $cat){
			echo "<option value='direction-{$cat->term_id}'>{$cat->name}</option>";
		}
		echo '</select>';
	}
?>

[Stalker_RED]

Keit265, localStorage можно не выводить в консоль, а посмотреть в devtools, в application -> localStorage

Обновил ответ, там была опечатка.

[Keit265]

Stalker_RED, Теперь работает, спасибо!

[Keit265]

Stalker_RED, Я тогда со вторым не проверил и в общем ошибка. Одно находит нормально, но вот второе почему-то не хочет.
В консоли такая ошибка: Uncaught TypeError: Cannot set property 'value' of null
at HTMLDocument.loadValues (main.js?ver=20151215:22) 22 строка - это elem.value = localStorage.getItem(key);
Код с первой страницы 2-ух селектов:

<p class="program-m">Уровень подготовки</p>
<?php
$categories = get_terms('level', 'orderby=name&hide_empty=0');
if($categories){
	echo '<select name="level"><option value="card-item">Любая</option>';
	foreach ($categories as $cat){
		echo "<option value='level-{$cat->term_id}'>{$cat->name}</option>";
	}
	echo '</select>';
}
?>
<p class="program-m">Направление образования</p>
<?php
$categories = get_terms('direction', 'orderby=name&hide_empty=0');
if($categories){
	echo '<select name="direction"><option value="card-item">Любая</option>';
	foreach ($categories as $cat){
		echo "<option value='direction-{$cat->term_id}'>{$cat->name}</option>";
	}
	echo '</select>';
}
?>

Код 2 селектов с другой страницы:

<p class="rus">Уровень подготовки</p>
<?php
$categories = get_terms('level', 'orderby=name&hide_empty=0');
if($categories){
	echo '<select name="level" id="level1"><option value="card-item">Любой</option>';
	foreach ($categories as $cat){
		echo "<option value='level-{$cat->term_id}'>{$cat->name}</option>";
	}
	echo '</select>';
}
?>
<p>Направление образования</p>
<?php
	$categories = get_terms('direction', 'orderby=name&hide_empty=0');
	if($categories){
		echo '<select name="direction" id="direction1"><option value="card-item">Любое</option>';
		foreach ($categories as $cat){
			echo "<option value='direction-{$cat->term_id}'>{$cat->name}</option>";
		}
		echo '</select>';
	}
?>

[Stalker_RED]

Keit265, обновил ответ, добавил проверку, на случай когда элемент не найден.

[Keit265]

Stalker_RED, да всё работает, спасибо. Просто у меня что-то с браузером случилось
Нужно было сбросить всё.

Answer 2

[Tim]

Примерно так сохраняете данные о селектах.


На страницах которые вам нужны эти данные выводите примерно так

let select = localStorage.getItem(keySelect);
 let data = select ? JSON.parse(select) : {};
document.body.append(data['select-1'])

Comments

[Keit265]

А как это вы 2 раза одинаковый id написали?)

[Tim]

Keit265, id можно удалить. я им не пользуюсь

[Keit265]

Получается мне нужно указать двум одинаковым одинаковый data-id?
Есть на одной странице два селекта и точно такие же на следующей

Получается на первые связанные селекты нужно указать одинаковый data-id? На первые 2 data-id="1", а на вторые два data-id="2", так нужно? Если да, то что-то не работает когда я перехожу на следующую страницу.

[Keit265]

Как-то я не разобрался куда мне вставить этот код на странице вывода и при чём там select-1, если в коде такого нет
let select = localStorage.getItem(keySelect);
let data = select ? JSON.parse(select) : {};
document.body.append(data['select-1'])

[Tim]

Keit265, data-id не должен быть одинаковым. если data-id = 1, то будет data['select-1']. Если data-id = 3, то data['select-3']

[Tim]

если рендеринг происходит на php, то localStorage лучше не использовать. можно заменить на куки(если селектов будет мало) или на сессиях. т.е когда происходит событие изменения селекта отправлять запрос аякс(fetch) и записывать в сессию данные и в зависимости от сессии рендерить селект

[Keit265]

Tim, я думал, что без разницы особо. И куда мне всё-таки вставить этот скрипт?
let select = localStorage.getItem(keySelect);
let data = select ? JSON.parse(select) : {};
document.body.append(data['select-1'])

Как я понял, нужно на то место куда будет сохраняться select или как?

[Keit265]

Tim, Как мне тогда соединить первые 2 select (на первой и второй странице по 1), если не ставить одинаковые data-id. Я думал по нему будет определяться какое куда значение подставлять

[Tim]

Keit265, это пример вывода. перепишите его как вам нужно будет

[Tim]

Keit265, чувак тебе нужно еще учиться. Очень глупые вопросы

[Keit265]

Tim, ну я в скриптах тупо базу знаю, которая тоже пригождается. В основном какое-то сложное не сильно попадается. И посоветуйте где подучиться можно