Как сделать select с запоминанием выбранного ранее состояния option?

@ufaclub · Регистрация: 16.02.2013

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
4
5
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>

Например выбрали option со значением 1 - потом перешили на другую страницу и там уже в селекте будет выбрана - 1

@xenohunter · 11.04.2013, 14:58

ufaclub, cookies вам в помощь. Также этого можно добиться через взаимодействие с сервером (с сохранением для отдельных пользователей).

@ufaclub · 11.04.2013, 15:02 **[ТС]**

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

@xenohunter · 11.04.2013, 15:26

ufaclub, у себя проверил - работает:

HTML5
1
2
3
4
5
<select id="select" name="select">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Для записи:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var select = document.getElementById('select');
select.onchange = function () {
 
    // задаём время, через которое наш cookie истечёт
    var date = new Date();
    date.setDate(date.getDate() + 7);
 
    // записываем cookie
    document.cookie = 'select=' + select.value +'; path=/; expires=' + date.toUTCString();
 
};

Для чтения:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// возвращает cookie с именем name, если есть, если нет, то undefined
function getCookie(name) {
    var matches = document.cookie.match(new RegExp(
            "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}
 
var select = document.getElementById('select'),
cookie = getCookie('select');
 
if (cookie) {
    select.value = cookie;
}

Функция getCookie взята из учебника по JavaScript за авторством Ильи Кантора. Очень рекомендую с этим учебником ознакомиться.

@ufaclub · 11.04.2013, 15:40 **[ТС]**

Спасибо! все работает!

Теперь мне бы еще пример кусочка кода - который считает значение option и выведем в div ту или иную информацию

например если option val. = 1 то вставить в содержание <div id="gorod"></div> - москва
если option val. = 2 то <div id="gorod">Уфа</div>
если option val. = 3 то <div id="gorod">Казань</div>
....

т.е стандартная работы переменой при условиях если if / else

@xenohunter · 11.04.2013, 15:59

ufaclub, вот так, надеюсь, заработает:

JavaScript
1
2
3
4
5
6
function city() {
    var select = document.getElementById('select'),
        target = document.getElementById('gorod'),
        cities = ['Москва', 'Уфа', 'Казань'];
    target.innerHTML = cities[select.value];
}

Соответственно, value у опций замените на "0, 1, 2" вместо "1, 2, 3", а функцию city надо запускать после того, как проверены cookies и по изменению select'а.

@ufaclub · 11.04.2013, 16:35 **[ТС]**

спасибо!

Добавлено через 21 минуту
спасибо! только небольшая проблема - как сделать чтобы сразу при первом открытии грузилось первое значение

HTML5
1
2
3
4
5
6
7
<select name="select">
<option value="1" data-city="8 800 555 04 69">Россия</option>
<option value="2" data-city="8 496 123 45 56">Москва</option>
<option value="3" data-city="8 345 039 93 87">Казань</option>
<option value="4" data-city="8 347 244 00 92">Уфа</option>
</select>
<div id="gorod"></div>

в див gorod --- 8 800 555 04 69

@xenohunter · 11.04.2013, 16:47

ufaclub, добавить аттрибут selected в option по умолчанию:

HTML5
1
<option value="1" data-city="8 800 555 04 69" selected>Россия</option>

А ещё вы value не поменяли.

@and_y87 · 11.04.2013, 20:19

ufaclub, Уважаемый...

Если вы используете единственный параметр для передачи то: нет необходимости использовать cookie...
Используйте Get запрос...

Добавлено через 1 минуту
На выходе получите ссылку с get переменной...

в этой переменной пускай и будет лежать нужное вам значение...
плюс такой ссылкой можно поделиться с человеками...
к примеру если ссылка открывает один из блоков ( к примеру: Обзор, Характеристики, Комментарии )...

@Soldado · 11.04.2013, 21:07

Если через адресную строку передавать значение, то можно так.

index.html

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>СЕЛЕКТОР</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
    
//получаем hash из адресной строки #.... и обрезаем #  
var hashforSelector =window.location.hash.slice(1);
 
// проверяем все option и выбираем с таким же текстом
$('select[name=select] option').each(function(){
var thisText=$(this).text()
if(thisText==hashforSelector)
    $(this).attr('selected','selected');
});
 
//записываем текст из выбранного option в hash  адресной строки
$('select[name=select]').change(function(){
    var textS = $(this).find('option:selected').text();
    window.location.hash =textS;
});
 
// переход по ссылке отменяется добавляется hash   и переход
$('a').click(function(e){
    e.preventDefault();
var attrHref =$(this).attr('href');
var hashAdr =window.location.hash;  
window.location=attrHref+hashAdr;   
    
});
    
}); /*end ready*/   
    
</script>
 
</head>
 
<body style="padding:200px">
<h3>Первая страница</h3>
 
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br/><br/>
 
<a href="index2.html">Перейти на другую страницу</a>
</body>
</html>

index2.html

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>СЕЛЕКТОР</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
    
//получаем hash из адресной строки #.... и обрезаем #  
var hashforSelector =window.location.hash.slice(1);
 
// проверяем все option и выбираем с таким же текстом
$('select[name=select] option').each(function(){
var thisText=$(this).text()
if(thisText==hashforSelector)
    $(this).attr('selected','selected');
});
 
//записываем текст из выбранного option в hash  адресной строки
$('select[name=select]').change(function(){
    var textS = $(this).find('option:selected').text();
    window.location.hash =textS;
});
 
// переход по ссылке отменяется добавляется hash   и переход
$('a').click(function(e){
    e.preventDefault();
var attrHref =$(this).attr('href');
var hashAdr =window.location.hash;  
window.location=attrHref+hashAdr;   
    
});
    
}); /*end ready*/   
    
</script>
 
</head>
 
<body style="padding:200px">
<h3>Вторая страница</h3>
 
<select name="select">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br/><br/>
<a href="index.html">Вернуться назад</a>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .

@xenohunter Дзен-программист 122 / 87 / 16 Регистрация: 10.04.2013 Сообщений: 253
	11.04.2013, 14:58
	ufaclub, cookies вам в помощь. Также этого можно добиться через взаимодействие с сервером (с сохранением для отдельных пользователей). 0

@ufaclub 0 / 0 / 0 Регистрация: 16.02.2013 Сообщений: 56
	11.04.2013, 15:02 [ТС]
	да я понимаю что можно или через куки сделать или через ссесии. Но я недостаточно просвещен чтобы самому написать скриптик. Хотелось бы чтобы пример наглядный кто то помог сделать. 0

@ufaclub 0 / 0 / 0 Регистрация: 16.02.2013 Сообщений: 56
	11.04.2013, 15:40 [ТС]
	Спасибо! все работает! Теперь мне бы еще пример кусочка кода - который считает значение option и выведем в div ту или иную информацию например если option val. = 1 то вставить в содержание <div id="gorod"></div> - москва если option val. = 2 то <div id="gorod">Уфа</div> если option val. = 3 то <div id="gorod">Казань</div> .... т.е стандартная работы переменой при условиях если if / else 0

@and_y87 Develo0per 424 / 368 / 75 Регистрация: 27.02.2012 Сообщений: 1,379 Записей в блоге: 98
	11.04.2013, 20:19
	ufaclub, Уважаемый... Если вы используете единственный параметр для передачи то: нет необходимости использовать cookie... Используйте Get запрос... Добавлено через 1 минуту На выходе получите ссылку с get переменной... в этой переменной пускай и будет лежать нужное вам значение... плюс такой ссылкой можно поделиться с человеками... к примеру если ссылка открывает один из блоков ( к примеру: Обзор, Характеристики, Комментарии )... 0