Проблема с выпадающим списком
Доброго времени суток мастера программирования! Будьте добры подскажите как сделать, чтобы выбранный пункт выпадающего списка сохранялся при обновлении страницы. Пробовал подключить localstorage, но никаких изменений не получилось.
<head>
<script>
$(function(){
/* выбор города */
$('.delivery_list').click(function(){
$(".cities_list").slideToggle('fast');
});
$('ul.cities_list li').click(function(){
var tx = $(this).html();
var tv = $(this).attr('alt');
$(".cities_list").slideUp('fast');
$(".delivery_list span").html(tx);
$(".delivery_text").html(tv);
});
})
</script>
</head>
<body>
<div class="delivery_block">
<div class="delivery_list"><div id="btn"> </div><span>Москва</span></div>
<ul class="cities_list">
<li alt="Адрес 1">Москва</li>
<li alt="Адрес 2">Санкт-Петербург</li>
<li alt="Адрес 3">Краснодар</li>
<li alt="Адрес 4">Новосибирск</li>
</ul>
<div class="delivery_text">Адрес 1</div>
</div></body>
Заранее благодарю! |
Этот список "самоделка" или же все таки костомизация оригинального select?
|
Самоделка на в виде ненумерованного списка (ни cookie ни localstorage не работают). Может есть какой-нибудь готовый вариант списка, который будет выводить значение селекта в отдельном текстовом блоке и при этом сохранять выбор при обновлении страницы?
Все сделал на главной странице, стилизовал, но вот при обновлении все слетает на первый город! Подскажите как быть, пожалуйста! |
$(function() {
var bLst = $('div.delivery_list').click(function(){
iLst.slideToggle('fast');
}).find("span"),
aTxt = $("div.delivery_text"),
iAdr = $('ul.cities_list li').click(function(){
var i = $(this);
localStorage.sity = i.index();
iLst.slideUp('fast');
bLst.text(i.text());
aTxt.text(i.data('adr'));
}),
iLst = iAdr.first().parent();
if(localStorage.sity) {
bLst.text(iAdr.eq(localStorage.sity).text());
aTxt.text(iAdr.eq(localStorage.sity).data('adr'));
}
});
<li data-adr="Адрес 1">Москва</li> - Хотя прежде чем лезть в localStorage, нужно проверять поддержку его браузером. |
Только хотел закинуть почти такой же код но laimas опередил. :)
Сам подумал что значит не пашет localStorage и куки. Вроде как все должно быть норм |
Цитата:
|
Это единственный вразумительный (без выпендрежа "мол читай то, читай это") ответ за неделю мучений! Спасибо большое!
P.S. Литературу по данной тематике читаю по мере возможности! Еще раз спасибо! |
Цитата:
var mem = (function() {
try {
return 'localStorage' in window && window['localStorage'] !== null ? localStorage : false
} catch(e) {
//
}
}());
$(function() {
var bLst = $('div.delivery_list').click(function(){
iLst.slideToggle('fast');
}).find("span"),
aTxt = $("div.delivery_text"),
iAdr = $('ul.cities_list li').click(function(){
var i = $(this);
if(mem) mem.sity = i.index();
iLst.slideUp('fast');
bLst.text(i.text());
aTxt.text(i.data('adr'));
}),
iLst = iAdr.first().parent();
if(mem && mem.sity) {
bLst.text(iAdr.eq(mem.sity).text());
aTxt.text(iAdr.eq(mem.sity).data('adr'));
}
});
Но поведение раскрывающегося списка имеет еще одну особенность - если произведен щелчок вне его, то список будет закрыт. О реализации подобного можно прочесть здесь. А вот атрибут alt используется тегом IMG и "правила хорошего тона" определяют его обязательное заполнение - в случае если изображение не загружено, то будет отображен текст определенный в alt. Элемент LI не имеет данного атрибута, а использовать "чужой" атрибут как "пользовательский", это некорректно. |
| Часовой пояс GMT +3, время: 03:55. |