Установите флажок, чтобы изменить URL

Question

Я хочу использовать выбор, чтобы изменить запрос в конце URL-адреса, чтобы изменить параметры сортировки.Например:

<select id="sort"> 
    <option value="?order_by=date">Recent</option> 
    <option value="?order_by=random">Popular</option>
    <option value="?order_by=random">Random</option> 
    <option value="">Staff Picks</option>
</select>

, например, по умолчанию список сообщений будет показан по дате, а затем, если пользователь выберет опцию, он перезагрузит страницу со строкой запроса в конце URL-адреса.Если возможно, вы хотите использовать jQuery для достижения этой цели.Спасибо.

Answer 1

Прикрепите обработчик к событию изменения для поля выбора, который добавляет значение выбранной опции к текущему местоположению окна со всем после?отрезано:

$('#sort').change(function(e){
    var locAppend = $(this).find('option:selected').val(),
        locSnip   = window.location.href.split('?')[0];

    window.location.href = locSnip + locAppend;
});

Вот пример 100 (он не перенаправляет, но вы поняли ...)

---

Чтобысоответствующее значение, выбранное при загрузке страницы, вы можете запустить следующую функцию перед привязкой обработчика изменений:

function selectCurSort() {
    var match = window.location.href.split('?')[1];
    $('#sort').find('option[value$="'+match+'"]').attr('selected',true);
}
selectCurSort();

Answer 2

Я не совсем уверен, почему вы не просто используете что-то вроде:

<form method="GET">
    <input type="hidden" name="query" value="..." />

    <select id="sort" name="order_by">
        <option value="date">Recent</option>
        <option value="popular">Popular</option>
        <option value="random">Random</option>
        <option value="staff">Staff Picks</option>
    </select>

    <input type="submit" value="Sort" />
</form>

А для JS, если таковые имеются, просто:

$('#sort').change(function() {
    $(this).parents('form').submit();
});

Тогда,вам не нужно, чтобы кто-либо включал JavaScript.

Answer 3

Как это?

$("#sort").change(function(){
  window.location = $(this).find("option:selected").val();
});

Answer 4

$(function() {
   $("#sort").change(function() {
     var myVal = $(this).val();
     window.location = "www.mywebsite.com/"+ myVal;
   });
   var qs = window.location.pathname;
   $("#sort option").each(function() {
       if(qs.contains($(this).val()))
        $(this).addAttr("selected","selected");
    });
});

Попробуйте это.

Answer 5

Добавьте

onchange="if (this.value && /^\?/.test(this.value)) location = location.path + this.value"

к вашему <select>.

Возможно, вы захотите поставить пустую опцию также вверху.