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

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@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