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>

我想要实现的是在浏览器网址中附加我的选项值，然后在点击下拉选项后重定向到该网址。例如，我的浏览器网址为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;
});

但问题是，当我选择一个选项时，它会附加值，页面会在重新加载后重新加载，当我选择其他选项时，它会占用整个网址，其中第一个选项附加了这样的值 www.browserurl.com/search=productname&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

您可以将&上的网址拆分为：

$(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/

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

2 个答案: