javascript - Jquery下拉列表函数返回并保持选择

标签 javascript jquery

我有一个愚蠢的简单下拉列表,当进行选择时,它会将下面列表中看到的值附加到 URL 中以进行排序,虽然这有效,但我缺少了一 block 拼图不保留选择。 onchange 强制刷新页面,而值仍然传递到 URL 并保留给用户,他们可能仍然明显地认为他们尚未做出选择。因此,我正在考虑使用 Jquery 作为 onchange 中的函数,而不是现在使用的重定向,但我不知道从哪里开始,因为我对此很陌生......

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

任何帮助将不胜感激...

最佳答案

这是和。回答你的问题。

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

关于javascript - Jquery下拉列表函数返回并保持选择,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24203593/

相关文章:

javascript - V-bind等级多种选择

javascript - 重新加载页面时如何保持选项卡处于事件状态?

javascript - 表单提交上的 Bootstrap 模式未在正确的位置显示

jQuery Draggable(),拖动时执行动态功能

javascript - 如何根据条件将 DIV 滚动到浏览器窗口的顶部?

javascript - 在es6中导入带有参数的IIFE?

javascript - Node.js 和 Sproutcore 上的相同框架/库

可以悬停并单击的 Javascript/CSS 工具提示

javascript - IFrame 的 JQuery 插件问题

javascript - 如何判断属性是否存在且为假