Question

我有一个下拉选择框，它将一个字符串附加到URL，然后根据后面的URL字符串更改对目录进行排序。例如，URL可能如下所示：

http://example.com/Products/Catalogue/tabid/102/page/2/pagemid/554/Catalogue.aspx

如果我选择了第二个值，那就是标题A-Z＆＃39;将附加？orderby = 2，这将使URL成为：

http://example.com/Products/Catalogue/tabid/102/page/2/pagemid/554/Catalogue.aspx?orderby=2

在页面上，您可以执行此操作，但只要您从目录中选择新页面就会忘记选择，因此URL可能会更改页面，如... page / 3 / ...示例：

http://example.com/Products/Catalogue/tabid/102/page/3/pagemid/554/Catalogue.aspx

注意？orderby = 2丢失了？问题是如何通过javascript或Jquery将其作为一个持久的选择？

以下是正在执行上述操作的当前脚本，但不会保留对分页刷新的选择。

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

帮助这方面会很棒，我不知道从哪里开始......

Answer 1

您可以跨请求维护订购索引，并在页面加载时检查订购索引并相应地进行排序。

您的第二个网址应为： example.com/Products/Catalogue/tabid/102/page/3/pagemid/554/Catalogue.aspx?orderby=2

通过分页保持用户选择

1 个答案: