选择框来更改网址

我想使用select来更改URL末尾的查询以更改它的排序选项。 e.g：选择框来更改网址

<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来实现这一点。谢谢。

来源

2011-03-16 Cameron

附加一个处理程序，以改变事件的选择框后一切将所选选项的值到当前窗口的位置？扯下：

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

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

Here's an example ࢐（它不重定向，但你的想法...）

要对页面加载选择合适的值，你可以运行下面的函数您绑定的变化处理程序之前：

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

来源

2011-03-16 23:05:06 mVChr

我该如何做到这一点，选择框具有与查询相关的选定值？所以如果我选择Popular，它会保持在回发状态？ – Cameron 2011-03-16 23:10:40

查看更新的答案。 – mVChr 2011-03-16 23:16:57

通过运行BEFORE绑定函数，你的意思是什么？我只是把功能放在其他代码的前面吗？ – Cameron 2011-03-16 23:20:37

添加

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

您<select>。

您可能还想在顶部放一个空白选项。

来源

2011-03-16 23:01:34

$(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"); 
    }); 
});

试试看。

来源

2011-03-16 23:01:54

如何使选择框具有与查询相关的选定值？所以如果我选择Popular，它会保持在回发状态？ – Cameron 2011-03-16 23:08:24

是否这样？

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

来源

2011-03-16 23:02:37 Haochi

不会将*整个URL *设置为'？order_by = date'（例如）？不会'window.location + = $（this）.val（）;'稍微更合适一些？（附加* * URL，而不是*替换*） – 2011-03-16 23:14:06

@大卫虽然我没有规格支持我，但从经验来看，它会工作得很好。 – Haochi 2011-03-16 23:17:00

@David，我相信它足够聪明，可以知道你是指另一个域还是一个页面或查询字符串。 – 2011-03-16 23:21:41

我不明白为什么你不只是使用类似：

<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。

来源

2011-03-16 23:16:53 pioto

“然后，你不需要任何人启用JavaScript。”？那么......你的第二个代码片段是什么？ – Haochi 2011-03-16 23:17:55

@Haochi - 它是*可选的* Javascript。如果JS被阻止，用户仍然可以点击“排序”按钮。 – 2011-03-16 23:23:37

选择框来更改网址

回答

相关问题