2014-06-13 37 views
0

我有什么是一个愚蠢的简单下拉列表,当做出选择时,它会将下面列表中显示的值附加到URL中进行排序,我错过了一部分难题,因为它不保留选择。 onchange强制刷新页面,而值仍然传递到URL并保留给用户,但仍可能很明显他们没有做出选择。所以,我在看也许使用jQuery作为平变化,而不是现在正在使用的重定向功能,但我不知道从哪里开始,因为我很新的这...Jquery下拉列表函数返回并保持选择

<select id="Selection" class="sorter" onchange="location=this.options[[this.selectedIndex]].value" style="float:right;margin-right:8px;"> 
    <option value="">Sort by</option> 
    <option value="?orderby=0">Code</option> 
    <option value="?orderby=1">Title A-Z</option> 
    <option value="?orderby=2">Title Z-A</option> 
    <option value="?orderby=3">Brand</option> 
    <option value="?orderby=4">Lowest price</option> 
    <option value="?orderby=5">Highest price</option> 
    <option value="?orderby=6">Lowest Quantity</option> 
    <option value="?orderby=7">Highest Quantity</option> 
</select> 

任何帮助将非常感谢...

+1

显示jQuery代码或的jsfiddle –

+0

我没有任何这简直是我的全部,并且需要得到的东西,可能是一个可行的解决方案的帮助。我正在尝试根据CMS选择进行修改。 – user2034164

+0

是不是使用任何服务器端语言? –

回答

1

这是ans。到你的问题。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
(function($) { 
    $.QueryString = (function(a) { 
     if (a == "") return {}; 
     var b = {}; 
     for (var i = 0; i < a.length; ++i) 
     { 
      var p=a[i].split('='); 
      if (p.length != 2) continue; 
      b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " ")); 
     } 
     return b; 
    })(window.location.search.substr(1).split('&')) 
})(jQuery); 
var qstr=$.QueryString["orderby"]; 
alert(qstr); 
//$("#Selection").prop("selectedIndex", qstr); 
</script> 

<select id="Selection" class="sorter" onchange="location=this.options[[this.selectedIndex]].value" style="float:right;margin-right:8px;"> 
    <option id=1 value="">Sort by</option> 
    <option id=2 value="?orderby=1">Code</option> 
    <option id=3 value="?orderby=2">Title A-Z</option> 
    <option id=4 value="?orderby=3">Title Z-A</option> 
    <option id=5 value="?orderby=4">Brand</option> 
    <option id=6 value="?orderby=5">Lowest price</option> 
    <option id=7 value="?orderby=6">Highest price</option> 
    <option id=8 value="?orderby=7">Lowest Quantity</option> 
    <option id=9 value="?orderby=8">Highest Quantity</option> 
</select> 

<script>$("#Selection").prop("selectedIndex", qstr); 
</script> 


</body> 
</html> 
+0

它增加了一个弹出窗口和页面刷新不工作了,你可以看看你自己:http://protoys.gentex.com.au/Products/Catalogue.aspx你会发现在产品 – user2034164

+0

前删除警告框然后删除弹出窗口,其方便。 –

+0

伙计,你没有包括,onchange事件。 USE like above:onchange =“location = this.options [[this.selectedIndex]]。” –