Используя jQuery, как сделать, чтобы выпадающее меню появлялось после автоматического перенаправления и нажатия кнопки «Назад»? - PullRequest
Новая
       20

Используя jQuery, как сделать, чтобы выпадающее меню появлялось после автоматического перенаправления и нажатия кнопки «Назад»?

0 голосов
/ 25 октября 2011

В моем коде ниже, при выборе «Животные» в выпадающем меню появляется второе выпадающее меню.Выбор любого элемента в этом втором раскрывающемся меню вызывает перенаправление страницы.Когда вы нажимаете кнопку «Назад» в браузере, это второе раскрывающееся меню исчезает во всех браузерах, кроме Firefox.Я хочу, чтобы пользователь мог изменить выбор своего животного, например, сначала выберите «Кошка», а затем вернитесь и выберите «Птица».

Есть ли способ заставить второе выпадающее меню появиться снова, не используяjQuery плагин истории?

Этот код не работает так, как я описал в jsfiddle, поэтому вставил его здесь: 

<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
<script type="text/javascript">
$(document).ready(function(){
$('#animal_cat').hide();

$('#search_collquery').change(function(){
    if($(this).val() == 'animals') { 
        $("#animal_cat").show();
    } else {
        $("#animal_cat").hide();
    }
});           

$('#search_catquery').change(function(){      
    window.location.href = "http://www.google.com/search?q=" + $(this).val();
});        
});                            
</script>
</head>
<body>
<p>Search Collections:</p>
<select id="search_collquery">
<option selected="selected"> - Select One -</option>
<option value="animals">Animals</option>
<option value="trees">Trees</option>
</select>     
<div id="animal_cat"><p>Search Animal category:</p>
Category: <select id="search_catquery">
<option value="">-- None --</option>
<option>Dogs</option>
<option>Cats</option>
<option>Birds</option>
</select>
</div>
</body>

Спасибо.

ОБНОВЛЕНИЕ:Ответ, который я нашел, заключается в использовании window.location.hash и window.onload: 

$(document).ready(function() {
    $('#animal_cat').hide();
    $('#search_collquery').change(function() {
        if($(this).val() == 'animals') {
            $("#animal_cat").show();
        } else {
            $("#animal_cat").hide();
        }
    });

    $('#search_catquery').change(function() {
        window.location.hash = "animal_selected";
        window.location.href = "http://www.google.com/search?q = " + $(this).val();
    });
});

window.onload = function() {
    if(window.location.hash === '#animal_selected') {
        $('#animal_cat').show();
    }
};

1 Ответ

0 голосов
/ 25 октября 2011

Создан JS с плагином cookie, скачать здесь https://github.com/carhartl/jquery-cookie

См. Это: http://jsfiddle.net/tTHKn/

$('select').each( function() {
     var cookiename = $(this).attr('id');
     var searchCookie = $.cookie(cookiename);

    if(searchCookie != null) {
     //select from cookie
        $(this).children("option:contains("+searchCookie+")").attr('selected',true);
    }
});


$('select').change( function() {
    var select= $(this);
    var selectId = select.attr('id');
    var selectVal = select.children('option:selected').val();
     //add selected to cookie
    $.cookie(selectId, selectVal, { expires: 7 });   
});
...