获取浏览器 url 并附加下拉选项值

Question

我已经创建了一个用于对项目进行排序的下拉菜单，并且在单击一个选项时页面会重新加载并显示排序结果。这是我的下拉代码

<div class="sorting-option">
<label for="selectdropdown">Sort by : </label>
<select id="selectdropdown" class="dropdown-select" name="selectdropdown">
<option value="&">Recommended Items</option>
<option value="&sort1desc=F&sort1=Item_NAME">Name (A-Z)</option>
<option value="&sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
<option value="&sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE">Price (Low-High)  
</option>
<option value="&sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE">Price (High-Low) 
</option>
</select>
</div>

我想要实现的是在浏览器 url 中附加我的选项值，然后在单击下拉选项时重定向到那个 url。例如我的浏览器 url 是 http://www.browserurl.com/?search=productname 所以在点击下拉选项时，我想将该特定选项的值附加到浏览器中 url 类似这样的内容并重定向到那个 url http://www.browserurl.com/?search=productname&sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE

我试过这个脚本

$(document).ready( function() {
$('#selectdropdown').bind('change', function () {
var brwsr_url=document.URL;
var redirecturl= brwsr_url + $(this).val();
location.href = redirecturl;
});

但问题是当我 select 一个选项它附加值并且页面在重新加载后重新加载当我 select 另一个选项它需要整个 url 有第一个选项附加值是这样的 www.browserurl.com/search=产品名称&sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE&sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE

Answer 1

从 jQuery 1.7 开始，.on() 方法是将事件处理程序附加到文档的首选方法。对于早期版本，.bind() 方法用于将事件处理程序直接附加到元素。处理程序附加到 jQuery 对象中当前选定的元素，因此这些元素必须在调用 .bind() 时存在。有关更灵活的事件绑定，请参阅 .on() 或 .delegate().

中对事件委托的讨论

更多详情，http://api.jquery.com/bind/

Answer 2

您可以像这样拆分 & 上的 url：

$(document).ready( function() {
    $('#selectdropdown').bind('change', function () {
        var brwsr_url=document.URL;
        brwsr_url = brwsr_url.split('&');
        brwsr_url = brwsr_url[0]; 
        var redirecturl= brwsr_url + $(this).val();
        location.href = redirecturl;
   }); 
});

jsfiddle 用于您的示例 url：http://jsfiddle.net/cocxevyo/

获取浏览器 url 并附加下拉选项值

Get browser url and append dropdown option value

javascript

jquery

url

url-redirection