页面刷新后保留下拉列表的选定值

2023-12-02

我有一个按钮可以根据多个下拉值中的选择来过滤列表。但是,我遇到了一个问题,一旦单击按钮,页面就会刷新,并且下拉值将重置为默认值。如何确保刷新后所选值保留在下拉列表中?

<div><select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
  </select>

   <select>
    <option value="ford">ford</option>
    <option value="chevy">Chevy</option>
    <option value="ram">Ram</option>
    <option value="jeep">Jeep</option>
   </select>

   <button id="button" onclick="filterMyList()">Filter</button>
  </div>

关于如何处理这个问题有什么建议吗?谢谢。


您可以使用 HTML5 localStorage api (http://www.w3schools.com/html/html5_webstorage.asp)

您的案例示例:

$(document).ready(function() {
    // On refresh check if there are values selected
    if (localStorage.selectVal) {
            // Select the value stored
        $('select').val( localStorage.selectVal );
    }
});

// On change store the value
$('select').on('change', function(){
    var currentVal = $(this).val();
    localStorage.setItem('selectVal', currentVal );
});

希望这可以帮助。请随时通知我。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

页面刷新后保留下拉列表的选定值 的相关文章

  • 悬停此元素时隐藏元素后的伪元素

    我的菜单垂直放置在页面左侧和菜单之间 li 我有一个 after那是一个分隔符 我想要的是当我悬停元素本身 如果它是第一个元素 时隐藏 after 元素 或者当它是中间元素时隐藏上面和底部的元素 如果它是最后一个子元素 则隐藏 after前
  • 如何使用javascript将大图像转换为十六进制?

    如果我尝试将图像转换为十六进制 无论我使用哪个函数 我都会收到此错误消息 该图像的大小为 7 MB 19812 毫秒 清理 1401 2 1455 0 gt 1401 2 1455 0 MB 9 9 0 ms 自上次 GC 以来 8 3 m
  • 如何将内联 JavaScript 与 Express/Node.js 中动态生成的内容分开?

    对于具有几年 Web 开发经验但没有找到答案的人来说 这是一个有点菜鸟的问题程序员堆栈交换 or Google 我决定在这里问一下 我在用Express网络框架Node js 但这个问题并不特定于任何 Web 框架或编程语言 以下是从数据库
  • 摩卡 - Chai Karma“套件未定义”

    我对 jscript tdd 很陌生 遇到了问题 希望有人能告诉我我在做什么 在浏览器中运行测试 通过 HTML 文件 一切正常 通过节点和业力运行它们我得到以下异常 我想在 node js 主机的 karma 中使用 Mocha 和 Ch
  • 带有淘汰赛js的隐形recaptcha

    我正在完成隐形验证码 但我在实现它时遇到问题 谷歌开发人员页面中的代码显示它应该是这样的
  • Snap.svg - 停止在可悬停元素的子元素上重新触发悬停事件

    对于一个项目 我使用的 SVG 形状由背景多边形和背景多边形上方的一些文本 我已将其转换为路径 组成 我正在使用 Snap svg 为我的形状设置动画 当我将鼠标悬停在多边形上时 形状应该缩放到特定尺寸 包括其中的所有内容 鼠标移开时 形状
  • Draggable JS Bootstrap 模式 - 性能问题

    对于工作中的项目 我们在 JavaScript 中使用 Bootstrap Modal 窗口 我们想让一些窗口可移动 但我们遇到了 JQuery 的性能问题 myModal draggable handle modal header Exa
  • 防止 iOS 键盘在 cordova 3.5 中滚动页面

    我正在使用 Cordova 3 5 和 jQuery mobile 构建 iOS 应用程序 我在大部分应用程序中禁用了滚动功能 但是 当我选择输入字段时 iOS 键盘会打开并向上滚动页面 我不想要这个功能 由于输入足够高 键盘不会覆盖它 我
  • 如何将函数附加到弹出窗口关闭事件(Twitter Bootstrap)

    我做了一些搜索 但我只能认为我可以将事件附加到导致其关闭的按钮 https stackoverflow com questions 13205103 attach event handler to button in twitter boo
  • 在 HTML5 画布中,如何用我选择的背景遮盖图像?

    我试图用画布来实现这一点 globalCompositeOperation 但没有运气 所以我在这里问 这里有类似的问题 但我没有在其中找到我的案例 我的画布区域中有图层 从下到上的绘制顺序 画布底座填充纯白色 fff 用fillRect
  • Javascript split 不是一个函数

    嘿朋友们 我正在使用 javascript sdk 通过 jQuery facebook 多朋友选择器在用户朋友墙上发布信息 但是我收到此错误friendId split 不是函数 这是我的代码 function recommendToFr
  • 将 UMD Javascript 模块导入浏览器

    你好 我正在对 RxJS 进行一些研究 我可以通过在浏览器中引用它来使用该库 如下所示 它使用全局对象命名空间变量 Rx 导入 我可以制作可观察的东西并做所有有趣的事情 当我将 src 更改为指向最新的 UMD 文件时 一切都会崩溃 如下所
  • 图像背景不透明度不影响边框

    如何设置背景不透明度而不影响边框线不透明度 我找到的解决方案没有帮助 div class selected img src assets img image product 1 thumbnail jpg alt product 1 thu
  • 可以设置标题样式吗? (并且使用CSS或js?)[重复]

    这个问题在这里已经有答案了 我想知道是否可以设计一个title a href title This is a title Hello a 样式问题有两个方面 文本格式 编码 我猜这是可能的 所以在问题中这样做 工具提示样式 你能把它弄大一点
  • Firebase 函数 onWrite 未被调用

    我正在尝试使用 Firebase 函数实现一个触发器 该触发器会复制数据库中的一些数据 我想观看所有添加的内容votes user vote 结构为 我尝试的代码是 const functions require firebase func
  • 在 Shopify 商店中嵌入 Vue 组件

    在产品页面中 我尝试显示自定义 Vue 组件 为简洁起见 该组件根据给定的产品 ID 显示 Firebase 数据库中的一些信息 我最初尝试将其制作为 Shopify 应用程序 以便我可以访问他们的 API 我实现了 OAuth 并且可以检
  • 如何用另一个响应替换窗口的 URL 哈希?

    我正在尝试使用替换方法更改哈希 URL document location hash 但它不起作用 function var anchor document location hash this returns me a string va
  • Javascript Replace() 和 $1 问题

    我正在尝试创建一个脚本来搜索文本中的模式并在它找到的字符串周围包裹一个标签 shop attributes td each function this html function i html return html replace E 0
  • CSS溢出文本显示在几行中,没有断字

    我有一些长文本显示在 div 中 该 div 具有固定的宽度和高度 我希望文本显示在几行上 作为 div 高度 并且句子单词不会中断 一行中的单词前缀和下一行中的继续 此外 我想在末尾添加省略号最后一句话 CSS white space n
  • 如何在react-highcharts中使用图表工具提示格式化程序?

    如何使用图表工具提示格式化程序 我正在使用高图表的反应包装器 我有这样的配置 const CHART CONFIG tooltip formatter tooltip gt var s b this x b each this points

随机推荐

  • Coreplot 图形沿 y 轴的填充颜色

    在此输入图像描述 1 谁能告诉我如何在 coreplot 图上从 y 轴 4 到 10 以及整个 x 轴绘制深蓝色遮罩区域 如图所示 核心图称其为 背景限制带 几个示例应用程序中都有示例 包括绘图库 CPTPlotRange range C
  • 检查 UIView 是否显示 UIAlertView

    是否可以确定当前 UIView 是否显示 UIAlertView 而不是每次创建 UIAlertView 时设置一个变量 我在想一些类似的事情 if self view subviews containsObject UIAlertView
  • websql 使用 javascript 删除列

    我正在尝试使用 javascript 删除 websql 数据库中的列 我尝试了以下方法但没有成功 db transaction function transaction transaction executeSql ALTER TABLE
  • R:具有大内存的 distm

    我正在尝试使用 R 中的 bigmemory 来计算超过 100 00 000 粗略估计 行和 16 列的距离矩阵 一小部分数据如下所示 list1 lt data frame longitude c 80 15998 72 89125 7
  • 在SQL Server 2008上优化7000万个极高密度空间点云的最近邻查询

    我的 SQL Server 2008 R2 Express 数据库中有大约 7500 万条记录 每个都是对应于某个值的经纬度 该表有地理列 我正在尝试为给定的纬度经度 点 找到一个最近的邻居 我已经有一个带有空间索引的查询 但根据记录在数据
  • PHP 分割数据范围以仅获得空闲块

    我有一个整个月的数据范围 fullrange array start gt 2019 12 01 00 00 00 end gt 2019 12 31 23 59 59 现在我在我的活动中进行搜索并得到如下结果 array activiti
  • 使用 RLMResults.Observe() 中的多个部分更新 UITableView

    我正在尝试创建一个自动更新的 TableView 这通常很容易在以下帮助下完成Results observe 替换 addNotificationBlock 我面临的问题是我无法弄清楚如何处理具有多个部分的 tableView 以及可以从一
  • 无法编译 64 位 Visual Studio 2010 项目

    我有几个无法在 64 位下编译的 VS 2010 项目 32 位构建工作正常 没有任何问题 我做了很多事情 比如重置 Visual Studio 设置 首先通过 IDE 然后通过命令行 修复 重装等都无法编译项目 它总是告诉我 cannot
  • jQuery 将元素的高度设置为组中的最高高度

    我正在尝试使用 jQuery 从 div 中的前 3 个元素中找到最高的元素 然后将所有 3 个元素设置为相同的高度 然后检查接下来的 3 个元素并设置它们 等等 如果我的窗口宽度 X 也如果窗口宽度 这是我当前适用于所有元素的代码 我只想
  • 如何在Webview中自动输入密码

    我是 Java 和 Android 新手 我有一个问题 我认为解决方案可能很简单 但我无法解决 我创建了一个带有 WebView 的应用程序 我希望 WebView 自动输入用户名和密码 以便用户在启动应用程序时已经登录 我用谷歌搜索并找到
  • 如何配置 IIS 以使用自定义内容提供 404 响应?

    这个问题与this 希望措辞更好 我想从 ASP NET MVC 提供自定义 404 页面 我设置了路由处理程序和所有基础设施 以确保通过单个操作处理不存在的路由 public ActionResult Handle404 Response
  • 使用 Capybara/Selenium Webdriver 测试 HTML5 文件上传 - Ruby

    我有一个简单的模式 其中向用户显示浏览按钮以添加要上传的文件 由于一个未知的问题 无论是HTML5文件输入还是浏览器添加了自己的功能 这都成为测试的痛苦 在我的页面上有
  • 为什么一个简单的任务需要两个 SQL Server Service Broker 队列?

    我在网上找到的所有使用 SQL Server Service Broker 队列的示例似乎都有两个队列 我不明白为什么 每个例子似乎都假设这是显而易见的 没有必要解释 有几件事将写入我的队列 存储过程将从队列中读取并插入到数据库中 为什么我
  • 存储过程或 OR 映射器?

    哪个更好 或者使用 and OR 映射器与 SP 一起使用 如果您已经拥有带有 SP 的系统 那么 OR 映射器值得吗 我喜欢 ORM 因为你不必重新发明轮子 话虽如此 这完全取决于您的应用程序需求 开发风格和团队的风格 这个问题已经被覆盖
  • 在python中将UNIX时间戳转换为str并将str转换为UNIX时间戳[重复]

    这个问题在这里已经有答案了 例如 我想转换 UNIX 时间戳1385629728 to str 2013 11 28 17 08 48 并转换 str 2013 11 28 17 08 48 到 UNIX 时间戳1385629728 请按如
  • GDK - 防止实时卡上的屏幕变暗

    我发布了一张高频实时卡片 我希望在用户查看该卡片时防止屏幕变暗 我意识到这是一个与此重复的问题 适用于 Google Glass 的 GDK APK 防止屏幕变暗 但答案似乎不再有效 示例项目也不再保留在屏幕上 我也尝试过获取唤醒锁但没有成
  • ADO.NET 的 SqlCommand.CommandTimeout 如何工作?

    考虑一个存储过程 它在不使用事务的情况下大约在 60 秒内更新一些行 我们设置ADO NET的SqlCommand 超时至 30 秒 SqlCommand Timeout 30 当超时发生在 30 秒时 存储过程是否会继续在数据库服务器中运
  • 启动一个完全独立于Python的进程

    我正在尝试从 python 启动一个完全独立的进程 我不能使用像这样简单的东西os startfile因为我需要传递参数 目前我正在使用subprocess popen这让我完成了 90 的任务 args some exe exe some
  • MPMovies PlayerViewController 进入背景时变黑

    我的 MPMoviePlayerViewController 有问题 当应用程序进入后台然后我再次启动它或转到另一个 viewControllers 时 电影变黑了 我有在菜单背景中播放的电影 这是我的代码 编辑代码 void viewDi
  • 页面刷新后保留下拉列表的选定值

    我有一个按钮可以根据多个下拉值中的选择来过滤列表 但是 我遇到了一个问题 一旦单击按钮 页面就会刷新 并且下拉值将重置为默认值 如何确保刷新后所选值保留在下拉列表中 div div