I';我想检测从下拉列表中选择的值,然后将其传递到页面url并重新加载


I'd like to detect the value chosen from a drop down, and then pass that to the page url and reload

我有一些javascript按照字母顺序a-z或z-a对ul进行排序。它在第一页上运行良好,但如果有多个页面,它会忽略第二页上的列表等。

因此,我不想使用javascript对li进行排序,而是想将选择传递回页面的查询并重新加载

这是我的剧本,现在大部分都是多余的。

var select = document.getElementById('organise');
        $('#organise').change(function() {
            if(select.value === 'A') {
                $('.recipeTable li').sortElements(function(a,b){
                    var aText = $.text([a]);
                    var bText = $.text([b]);
                    return aText.toLowerCase() > bText.toLowerCase() ? 1 : -1;
                });
            } else {
                $('.recipeTable li').sortElements(function(a,b){
                    var aText = $.text([a]);
                    var bText = $.text([b]);
                    return aText.toLowerCase() > bText.toLowerCase() ? -1 : 1;
                });
            }
        });

所以我想检测所选的下拉值(A或Z),并将其传递到url中并重新加载。我被卡住了;-?

富:)

我不确定这是解决问题的最佳方法,也许您应该详细说明分页不起作用的地方。在任何情况下,你都可以通过这样做来实现你需要做的事情(代码注释中的解释):

var queryString = {};
// Get the previous query string with a little help from PHP
// this shouldn't be a problem since you are already using PHP
// for your project.
queryString = <?php json_encode( $_GET ); ?>;
$('#organise').change( function() {
    // Set the sort property of the object to the value of the select.
    queryString.sort = $(this).val();
    // jQuery will help you serialise the JSON object back to
    // a perfectly valid query string (you may want to escape
    // characters)
    newQueryString = $.param( queryString );
    // Append the new query string
    window.location = newQueryString;
});

此函数将正确检查您是否已经有任何查询字符串并保留该字符串;此外,如果用户多次更改select,则不会添加多个查询字符串。

您可以更改url并使用传递参数

 document.location.href = document.location.href + "?arg=" + document.getElementById("organise").value;

如果不想在url 中显示,可以使用localstorage

例如:

  function Ascending()
  {
        $('.recipeTable li').sortElements(function(a,b){
            var aText = $.text([a]);
            var bText = $.text([b]);
            return aText.toLowerCase() > bText.toLowerCase() ? 1 : -1;
        });
  }
  function Descending()
  {
        $('.recipeTable li').sortElements(function(a,b){
            var aText = $.text([a]);
            var bText = $.text([b]);
            return aText.toLowerCase() > bText.toLowerCase() ? -1 : 1;
        });
  }

  if(localStorage.order=='A')
  { 
        return Ascending();
  }
  else
  {
       return Descending();
  }
  var select=document.getElementById('organise');
  $('#organise').change(function() {
        if(select.value === 'A') {
            localStorage.order=='A';
            return Ascending();
        } else {
            localStorage.order=='Z';
            return Descending();
        }
    });

请参阅上的localStoragehttp://www.w3schools.com/html/html5_webstorage.asp