Как перезагружать страницу с помощью JS?

Question

[Yura Khlyan]

Доброго времени суток.

Имеется магазин(на Django-Oscar, но не столь важно), на странице продукта есть dropdown менюшечка, в которой перечислены все варианты даного продукта(фасовка и т.п.). Мне нужно, что бы после выбора в этом dropdown-е элемента, возвращалась страница этого продукта.

================== UPD ==================
А можна так сделать, что бы на странице запоминало какой елемент был выбран? Тоесть на странице с продуктом соответвсенный елемент в dropdown был selected?
=========================================

Вот как формируеться список для dropdown:

for child in child_products:
    summary = child.title
        ...
    choices.append((child.id, summary))
self.fields['child_id'] = forms.ChoiceField(
    choices=tuple(choices), label=_("Variant"),
    widget=widgets.AdvancedSelect(disabled_values=disabled_values))

Вот вид url:

url(r'^(?P<product_slug>[\w-]*)_(?P<pk>\d+)/$',
                self.detail_view.as_view(), name='detail')

С Django уже как-то разобрался, но вот JS еще не осилил(но планирую), не могу это решить. Поможете?

Буду очень благодарен за помощь.

Answer 1

[Pshkll]

<select id="dynamic-select">
    <option value="http://www.google.com/">Google</option>
    <option value="http://www.youtube.com/">YouTube</option>
    <option value="http://www.yandex.ru/">Yandex</option>
</select>

<script>
    $('#dynamic-select').bind('change', function () {
        var url = $(this).val();
        if (url != '') {
            window.location = url;
        }
        return false;
    });
</script>

Дополнительный ответ на дополнительный вопрос в комментариях, используя GET:

<select id="dynamic-select">
    <option id="s1" value="test.html?s=s1">Google</option>
    <option id="s2" value="test2.html?s=s2">YouTube</option>
    <option id="s3" value="test3.html?s=s3">Yandex</option>
</select>

<script>
$(document).ready(function () {

    $.urlParam = function(name){
        var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
        if (results==null){
           return null;
        }
        else{
           return results[1] || 0;
        }
    }
    var selected = $.urlParam('s');
    if (selected){
        $("#dynamic-select option[id="+selected+"]").prop("selected", "selected");
    }

    $('#dynamic-select').bind('change', function () {
        var url = $(this).val();
        if (url != '') {
            window.location = url;
        }
        return false;
    });

});
</script>

Comments

[Yura Khlyan]

А можна так сделать, что бы на странице запоминало какой елемент был выбран? Тоесть на странице с продуктом соответвсенный елемент в dropdown был selected?

[Pshkll]

Yura Khlyan: у вас есть переменная url, записать её в куки, получить куки на странице продукта, сравнить с value опций selected и есть найдено совпадение то к option добавить selected.

[Yura Khlyan]

Pshkll: я пока-что с JS не очень, не могли бы вы набросвть что имеете ввиду?

[nirvimel]

Чтобы не загрязнять URL можно в cookies сохранять.

Answer 2

[Yura Khlyan]

Следуя советам Pshkll написал два скриптика. Первый для переходу на продукт по клику в дропдауне:

$('#id_child_id').bind('change', function () {
    var url = $(this).val();
    if (url != '') {
        window.location = url;
    }
    return false;
});

Второй, для выбора селектед в дропдауне:

$(document).ready(function () {
            var product = window.location.pathname
            $('#id_child_id').val(product);
          });