Как сделать 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>

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .

@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