Форум

LuckyRuS · #1 (**permalink**) 07.09.2016, 15:24

Доброго времени суток мастера программирования! Будьте добры подскажите как сделать, чтобы выбранный пункт выпадающего списка сохранялся при обновлении страницы. Пробовал подключить 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>

Заранее благодарю!

laimas · #2 (**permalink**) 07.09.2016, 15:37

Этот список "самоделка" или же все таки костомизация оригинального select?

LuckyRuS · #3 (**permalink**) 07.09.2016, 15:55

Самоделка на в виде ненумерованного списка (ни cookie ни localstorage не работают). Может есть какой-нибудь готовый вариант списка, который будет выводить значение селекта в отдельном текстовом блоке и при этом сохранять выбор при обновлении страницы?

Все сделал на главной странице, стилизовал, но вот при обновлении все слетает на первый город! Подскажите как быть, пожалуйста!

laimas · #4 (**permalink**) 07.09.2016, 16:29

$(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> - ~~alt~~

Хотя прежде чем лезть в localStorage, нужно проверять поддержку его браузером.

Bond · #5 (**permalink**) 07.09.2016, 16:45

Только хотел закинуть почти такой же код но laimas опередил.

Сам подумал что значит не пашет localStorage и куки.
Вроде как все должно быть норм

laimas · #6 (**permalink**) 07.09.2016, 16:58

Сообщение от Bond

почти такой же код

Лучше не такой, а определить сразу все, как исправлено.

LuckyRuS · #7 (**permalink**) 07.09.2016, 21:41

Это единственный вразумительный (без выпендрежа "мол читай то, читай это") ответ за неделю мучений! Спасибо большое!

P.S. Литературу по данной тематике читаю по мере возможности! Еще раз спасибо!

laimas · #8 (**permalink**) 08.09.2016, 00:41

Сообщение от LuckyRuS

Литературу по данной тематике читаю

А тут из литературы кроме описания API jQuery и ничего более читать. С localStorage же лучше так:

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 не имеет данного атрибута, а использовать "чужой" атрибут как "пользовательский", это некорректно.

Форум

Справочник

Discord чат

Курсы javascript