С Новым годом! Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.53/30: Рейтинг темы: голосов - 30, средняя оценка - 4.53
0 / 0 / 0
Регистрация: 16.02.2013
Сообщений: 56

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

11.04.2013, 14:52. Показов 6270. Ответов 9
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
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
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
11.04.2013, 14:52
Ответы с готовыми решениями:

Вывод ссылки из выбранного option в select
Подскажите пожалуйста, как лучше всего реализовать вывод ссылки, при выборе определенного option. Как делать форму я понял, но вот с...

Добавить класс объекту в зависимости от выбранного option в select
Есть такая форма с select. &lt;select name=&quot;design&quot; class=&quot;wpcf7-form-control wpcf7-select&quot; id=&quot;design&quot; aria-invalid=&quot;false&quot;&gt; ...

Как сделать невыбираемый option в элементе select ?
Подробнее: Есть выпадающий список, в котором нежелательно давать выбрать некоторые элементы. Подскажите, можно ли такой вообще сделать ?

9
Дзен-программист
 Аватар для xenohunter
122 / 87 / 16
Регистрация: 10.04.2013
Сообщений: 253
11.04.2013, 14:58
ufaclub, cookies вам в помощь. Также этого можно добиться через взаимодействие с сервером (с сохранением для отдельных пользователей).
0
0 / 0 / 0
Регистрация: 16.02.2013
Сообщений: 56
11.04.2013, 15:02  [ТС]
да я понимаю что можно или через куки сделать или через ссесии. Но я недостаточно просвещен чтобы самому написать скриптик. Хотелось бы чтобы пример наглядный кто то помог сделать.
0
Дзен-программист
 Аватар для xenohunter
122 / 87 / 16
Регистрация: 10.04.2013
Сообщений: 253
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 за авторством Ильи Кантора. Очень рекомендую с этим учебником ознакомиться.
1
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
Дзен-программист
 Аватар для xenohunter
122 / 87 / 16
Регистрация: 10.04.2013
Сообщений: 253
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'а.
0
0 / 0 / 0
Регистрация: 16.02.2013
Сообщений: 56
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
0
Дзен-программист
 Аватар для xenohunter
122 / 87 / 16
Регистрация: 10.04.2013
Сообщений: 253
11.04.2013, 16:47
ufaclub, добавить аттрибут selected в option по умолчанию:

HTML5
1
<option value="1" data-city="8 800 555 04 69" selected>Россия</option>
А ещё вы value не поменяли.
0
Develo0per
 Аватар для and_y87
424 / 368 / 75
Регистрация: 27.02.2012
Сообщений: 1,379
Записей в блоге: 98
11.04.2013, 20:19
ufaclub, Уважаемый...

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

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

в этой переменной пускай и будет лежать нужное вам значение...
плюс такой ссылкой можно поделиться с человеками...
к примеру если ссылка открывает один из блоков ( к примеру: Обзор, Характеристики, Комментарии )...
0
 Аватар для Soldado
901 / 833 / 198
Регистрация: 28.06.2012
Сообщений: 1,607
Записей в блоге: 4
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>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
11.04.2013, 21:07
Помогаю со студенческими работами здесь

Выбрать option в select при выборе другого option в другом select
Всем добрый привет! Подскажите, пожалуйста, как реализовать вот какую штуку: необходимо, чтобы при выборе option с value=0 в select с...

Как сделать вывод определенного контента при выборе значения <option> из <select>
Попытаюсь объяснить понятней :) Хочу реализовать такой тип вывода контента, когда пользователь выбирает из выпадающего списка (черех html...

Как сделать, чтобы option у select скрывался(схлопывался) при нажатии на любое пространство body, а не только
Приветствую! Как в данном плагине: http://www.formstone.it/components/dropdown чтобы select сам закрыл option при нажатии на любое...

Какое условие сделать чтобы от выбранного значения в select другой select принимал определенные значения?
выбираем например книгу и потом во втором select должно изменится значение &lt;label for=&quot;username&quot;&gt;Наименование...

Автономный кликер с запоминанием состояния
Возможно ли создать расширение для браузера на VDS, которое будет выполнять, так скажем, фунцкии кликера (переходить по страничкам и...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Новый 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. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru