Не разобрался с применением js и куки для нескольких select
Здравствуйте!
Нужен совет. Есть select с option
<select name="select" onchange="fn()">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
И js
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
))
return matches ? decodeURIComponent(matches[1]) : undefined
}
function setCookie(name, value, props) {
props = props || {}
var exp = props.expires
if (typeof exp == "number" && exp) {
var d = new Date()
d.setTime(d.getTime() + exp*3153600000)
exp = props.expires = d
}
if(exp && exp.toUTCString) { props.expires = exp.toUTCString() }
value = encodeURIComponent(value)
var updatedCookie = name + "=" + value
for(var propName in props){
updatedCookie += "; " + propName
var propValue = props[propName]
if(propValue !== true){ updatedCookie += "=" + propValue }
}
document.cookie = updatedCookie
}
function fn(){
var elem= document.getElementsByName('select')[0]
var currentOptionIndex= elem.selectedIndex;
setCookie('OptionIndex', currentOptionIndex);
}
window.onload=function(){
var elem= document.getElementsByName('select')[0];
elem.selectedIndex=getCookie('OptionIndex') || 1;
}
Не понял как мне применить еще для одного select и option, js выше. |
tart,
:write:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script>
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
))
return matches ? decodeURIComponent(matches[1]) : undefined
}
function setCookie(name, value, props) {
props = props || {}
var exp = props.expires
if (typeof exp == "number" && exp) {
var d = new Date()
d.setTime(d.getTime() + exp * 3153600000)
exp = props.expires = d
}
if (exp && exp.toUTCString) {
props.expires = exp.toUTCString()
}
value = encodeURIComponent(value)
var updatedCookie = name + "=" + value
for (var propName in props) {
updatedCookie += "; " + propName
var propValue = props[propName]
if (propValue !== true) {
updatedCookie += "=" + propValue
}
}
document.cookie = updatedCookie
}
function fn(elem) {
setCookie(elem.name, elem.selectedIndex);
}
window.onload = function () {
var elems = document.getElementsByTagName('select');
for (var i = 0; i < elems.length; i++) {
var elem = elems[i],
c = getCookie(elem.name);
elem.selectedIndex = c !== undefined ? c : 1;
}
}
</script>
</head>
<body>
<select name="select" onchange="fn(this)">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select name="select2" onchange="fn(this)">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</body>
</html>
|
рони, а как можно сделать, чтобы всем селектам, содержание которых берется из куков, но не является первым (selectedIndex), присваивался какой-нибудь новый класс?
|
Globus,
попробуйте самостоятельно решить этот вопрос в 52 строке if() {} ; кука есть и она не 1 то мастачим класс. |
рони,
Спасибо! Я пробую такую конструкцию
if(elem.selectedIndex > 0) { document.getElementsByTagName('select').AddClass('22')} ;
если индекс выбранного option не равен нулю, то присваивается класс 22 но не уверен, что эта конструкция хотя бы отчасти правильна, вас не затруднит указать на ошибку? |
Globus,
:cray: когда доки читать начнёте if(c !== undefined && c !== '1') {elem.className = '22'}; |
работает! спасибо!
|
Рони, подскажите, пожалуйста, в этого же скрипта можно ли присваивать "22" класс селекту, у которого индекс option перестал быть равным = '1' ?
|
А главное - Важный вопрос: можно ли, чтобы куки с каждого селекта записывались не при onchange="fn()" , а при нажатии на одну кнопку, например, <input type="button" name="save" value="saveall"> ?
|
Globus,
можно сделайте циклом обход селектов ... сам сам ... пора уже |
Цитата:
function savecook(elem) {
var sele = document.getElementsByTagName('select');
var i;
for (i=0; i<sele.length; i++) {
setCookie(elem.name, elem.selectedIndex);
}
};
window.onload = function () {
var elems = document.getElementsByTagName('select');
for (var i = 0; i < elems.length; i++) {
var elem = elems[i],
c = getCookie(elem.name);
elem.selectedIndex = c !== undefined ? c : 0;
}
}
</script>
</head>
<body>
<select name="select">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<select name="select2">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<input type="button" name="save" onclick="savecook(this)" value="save_all">
:help: |
Globus,
и где цикл который обходит все select ? |
Пардон, не тот кусок кода скинул, отредактировал сообщение выше... посмотрите, пожалуйста
|
Цитата:
Цитата:
|
function savecook() {
var sele = document.getElementsByTagName('select');
for (var=0; i < sele.length; i++) {
setCookie(elem.name, elem.selectedIndex);
}
};
window.onload = function () {
var elems = document.getElementsByTagName('select');
for (var i = 0; i < elems.length; i++) {
var elem = elems[i],
c = getCookie(elem.name);
elem.selectedIndex = c !== undefined ? c : 0;
}
}
</script>
.........
<input type="button" name="save" onclick="savecook()" value="save_all">
а теперь как? |
Globus,
откуда в строке 4 elem ? Цитата:
|
В 12-ой строке вижу только var elem = elems[i],
function savecook() {
var sel = document.getElementsByTagName('select');
var i;
for (var i=0; i < sel.length; i++) {
var sel = sels[i],
b = getCookie(sel.name);
sel.selectedIndex = b !== undefined ? c : 0;
};
window.onload = function () {
var elems = document.getElementsByTagName('select');
for (var i = 0; i < elems.length; i++) {
var elem = elems[i],
c = getCookie(elem.name);
elem.selectedIndex = c !== undefined ? c : 0;
}
}
</script>
.........
<input type="button" name="save" onclick="savecook()" value="save_all">
|
:-/
function savecook() {
var elems = document.getElementsByTagName('select');
for (var i = 0; i < elems.length; i++) {
var elem = elems[i];
setCookie(elem.name, elem.selectedIndex);
}
};
|
+ :thanks:
|
Цитата:
И как можно одной кнопкой сбросить все выбранные пункты в форме? Буду признателен |
indeec14,
https://javascript.ru/forum/jquery/5...tml#post394089 <form action="http://"> //тут ваши элементы <input name="" type="reset" value=""> </form> |
Спасибо.
<input name="" type="reset" value="">пробовал, сбрасывает форму, но после перезагрузки страницы опять селекты на своих местах, как записались в куки. Я как раз ищу вариант для того, чтобы аналогичной кнопочкой (если такой вариант существует) созданные куки очищать, сам пример взял из Вашего поста про запись селектов -
function getCookie(name) {
var matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
))
return matches ? decodeURIComponent(matches[1]) : undefined
}
function setCookie(name, value, props) {
props = props || {}
var exp = props.expires
if (typeof exp == "number" && exp) {
var d = new Date()
d.setTime(d.getTime() + exp * 3153600000)
exp = props.expires = d
}
if (exp && exp.toUTCString) {
props.expires = exp.toUTCString()
}
value = encodeURIComponent(value)
var updatedCookie = name + "=" + value
for (var propName in props) {
updatedCookie += "; " + propName
var propValue = props[propName]
if (propValue !== true) {
updatedCookie += "=" + propValue
}
}
document.cookie = updatedCookie
}
function fn(elem) {
setCookie(elem.name, elem.selectedIndex);
}
window.onload = function () {
var elems = document.getElementsByTagName('select');
for (var i = 0; i < elems.length; i++) {
var elem = elems[i],
c = getCookie(elem.name);
elem.selectedIndex = c !== undefined ? c : 1;
}
}
|
indeec14,
ищите примеры с localStorage, они лаконичнее чем cookie |
Цитата:
Оставлю это здесь, может кому пригодится: http://shpargalkablog.ru/2013/06/localStorage.html |
Цитата:
Работать с ними также просто, как и локальным хранилищем.
var c=cookie('CookieName');//Получить значение куки
if(!c)
cookie('CookieName','CookieValue',1);//Если куки нет, то создать куку на сутки
else
cookie('CookieName','-deleted-',-1);//Удалить куку
function cookie(name,value,days){
if(value){
var expires="";
if(days){
var date=new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
expires="; expires="+date.toGMTString();
}
document.cookie=name+"="+value+expires+"; path=/";
return true;
}else{
var nameEQ=name+"=";
var ca=document.cookie.split(';');
for(var i=0;i<ca.length;i++){
var c=ca[i];
while(c.charAt(0)==' ') c=c.substring(1,c.length);
if(c.indexOf(nameEQ)==0) return c.substring(nameEQ.length,c.length);
}
return null;
}
};
|
| Часовой пояс GMT +3, время: 01:42. |