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

【问题标题】：Get browser url and append dropdown option value获取浏览器 url 并附加下拉选项值
【发布时间】：2015-04-01 02:40:19
【问题描述】：

我创建了一个用于排序项目的下拉列表，单击一个选项后，页面会重新加载并显示排序结果。这是我的下拉代码

<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。例如我的浏览器网址是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;
});

但问题是，当我选择一个选项时，它会附加值，并且页面在重新加载后重新加载，当我选择其他选项时，它会占用整个 url，其中第一个选项附加值类似于这样 www.browserurl.com/search=productname&sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE&sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE

【问题讨论】：

标签： javascript jquery url url-redirection

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可以像这样在& 上拆分网址：

$(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 为您的示例网址：http://jsfiddle.net/cocxevyo/

【讨论】：

感谢它我正在寻找的东西:)