首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在提交后保留选中的onchange下拉列表值

在提交后保留选中的onchange下拉列表值,可以通过以下步骤实现:

  1. 在HTML中定义一个下拉列表(select)元素,并给它一个唯一的ID,例如:
代码语言:html
复制
<select id="mySelect" onchange="myFunction()">
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
  <option value="value3">Value 3</option>
</select>
  1. 使用JavaScript编写一个函数(例如myFunction),该函数在下拉列表的选项改变时被调用。函数内部可以获取选中的值,并将其存储在本地存储(localStorage)中,例如:
代码语言:javascript
复制
function myFunction() {
  var selectedValue = document.getElementById("mySelect").value;
  localStorage.setItem("selectedValue", selectedValue);
}
  1. 在页面加载时,检查本地存储中是否存在之前选中的值,并将其设置为下拉列表的选中值。可以在页面的<body>标签中添加以下JavaScript代码:
代码语言:javascript
复制
window.onload = function() {
  var selectedValue = localStorage.getItem("selectedValue");
  if (selectedValue) {
    document.getElementById("mySelect").value = selectedValue;
  }
}

这样,当用户选择下拉列表的选项并提交表单后,选中的值将会被存储在本地存储中。在页面重新加载后,之前选中的值将会被还原到下拉列表中。

请注意,这只是一种实现方式,具体的实现方式可能会根据具体的应用场景和需求而有所不同。此外,腾讯云并没有直接相关的产品或链接与此问题相关。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 【BootStrap】关于Select下拉框选择触发事件以及扩展

    转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆博客】 Select下拉问题,想在选择一个选项,前台显示做出变动,并且知道选择是第几个选项...onchange 事件会在域内容改变时发生。 onchange 事件也可用于单选框与复选框改变触发事件。 selectedIndex: 设置或返回下拉列表中被选项目的索引号。...这样做,我们只能获得选中哪项,而如果我们选中哪项,需要传递特殊信息,这个时候该怎么办呢。...,想获得那个value,这个时候怎么做。...本文章由[谙忆]编写, 所有权利保留。 转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆博客】

    2.5K20

    Easyui datagrid combobox输入框非法输入判断与事件总结

    输入框改变时触发事件 单选Combobox 针对单选Combobox 1、点选 通过点选下拉列表中可选项,并自动收起下拉列表 如果选取项和当前输入框不一样,会先后触发事件:onSelect ->...onChange -> onHidePanel; 如果选取项和当前输入框一样,仅会触发事件:onHidePanel 2、输入 通过在Combobox输入框中手动输入数据 如果停止输入数据和输入前不一样...,先后触发事件:onUnselect -> onChange 收起下拉列表时,触发事件: onHidePanel 2、输入 新增未选:输入如果匹配到下拉列表某个未选项,则自动选中该项,先后触发事件...: onSelect -> onChange 取消已选:修改已经输入且有匹配项,修改成无匹配项,则自动取消已选中对应项,先后触发事件:onUnselect -> onChange 如果停止输入和输入前不一样...收起下拉列表时,触发事件: onHidePanel 通过以上规律,我们可以在触发onSelect事件时,存储选取,在触发onUnselect事件时,移除取消选中,然后在收起下拉列表时,获取输入框和存储

    3.4K30

    表单多文件上传样式美化 && 支持选中文件删除相关项

    目录 文件上传基础 单文件上传 多文件上传 表单文件上传美化 选中文件删除 界面的处理 脚本处理 FileList FormData 一、文件上传基础 1....,选择文件,通过JS获取选择文件信息,并在新元素中显示出来 想着很简单,但随之而来问题就是,如果选中文件数量很多,新元素占空间多少就是个问题,可以默认显示几个文件,再通过“查看更多文件”查看到更多信息...这未免太繁琐,所以需要提供即时删除某个选中文件操作 三、选中文件删除 要提供选中文件可删除操作,就必然需要提供相关入口及脚本操作,下面围绕这点来做些解析 1. 界面的处理 ? ?...选择文件,我们可以通过删除按钮删除选中文件,因为会出现多文件情况,所以需要一个信息模版    选中两个文件,查看文件信息 ?

    4K10

    html下拉框设置默认_html下拉列表框默认

    HTTP 服务默认…… name 属性必须要相同,必须有一个 value 实现默认选中属性 :checked=”checked” – 文件输入项(在后期上传时候用到): -下拉…… html>...8.3多行文本输入框 8.4下拉列表框、 在表单中,通过和标记可 以在浏览器中设计一个下拉列表或带有滚动 …… > 指定要创建控件类型 Text 默认,创建一个单行文本输入控件 Password...HTML 基本语法与基本结构(重点) 标记…… 2 【案例16】趣味选择题 案例引入 学习表单核心是学习表单控件,HTML 语言提供了一系列表单控件,用于定义不同 表单功能,文本输入框、下拉列表...必须定义度量范围,既可以在 text 中,也可… 如何在 EXCEL 中建立下拉列表 1、 在本工作簿空白列输入下拉菜单内容,然后选中右键: 创建列表如下: 复制“=AC1:AC10” 2、 选中要建下拉菜单...表单域:包含了文本框、密码框、隐藏域、多 行文本框、复选框、单选框、下拉列表框和文 件上传框等。 ? 表单按钮:包括提交按钮、复位按钮和一般按 钮。 ?

    33.8K21

    JS实现select选中option触发事件操作示例

    分享给大家供大家参考,具体如下: 我们在用到下拉列表框select时,需要对选中选项触发事件,其实本身没有触发事件方法,我们只有在select里onchange方法里触发。...当我们要取得select选中事件时,用document.all[‘name’].value来获取,其中name是select名称。 如果我们要得到select全部就用一个for循环来实现。...select> $("#myselect").change(function(){ var opt=$("#myselect").val(); ... }); Javascript获取select下拉选中...现在有一id=test下拉框,怎么拿到选中那个呢?...jquery库) 1.获取选中项 var options=$("#test option:selected"); 2.拿到选中 alert(options.val()); 3.拿到选中文本

    10.8K20

    学用Hooks写React组件——基础版Select组件

    这里我们当然选择了render body方案,整个组件思路是:点击显示组件,通过定位显示组件位置来计算下拉框应该出现位置。下拉选中或者点击屏幕其他地方下拉框自动消失。选中,显示对应。...这里我把组件拆分为: Select组件(显示选择结果) Menu组件(显示选择列表) Position组件(用于定位下拉框显示位置) 准备完毕,开始输出 Menu组件 label 显示项展示 value...Select组件 defaultValue 默认选中 onChange 当值被改变时候调用方法 getContainer 获取菜单渲染父节点,默认render body Select.jsx.../隐藏 const [visible, setVisible] = useState(false); // 当前选中 const [data, setData] = useState...input接收一个defaultValue来设置初始,我们传入初始是对应value而不是label,所以这里我是用循环props.children来查找对应label,然后展示inputdefaultValue

    3K20

    Vcl控件详解_c++控件

    ,其我想大家一看就能明白 Modifiers:设置默认类型 事件  OnChange:当热键改变时发生 TAnimate 属性  Active:激活该控件 Center...Time:指出用户进入时间 事件 OnChange:当日期改变时触发 OnCloseUp:当关闭下拉框时触发 OnDropDown:当打开下拉框时触发 OnUserInput:当用户输入时触发...OnChange:当选择节点发生变化时触发 OnChanging:当选择节点将要发生变化时触发 OnCollapsed:节点折叠节点产生 OnCollapsing:折叠节点时触发...,用户操作,说明,用户不能最大化固定大小区 Bands:保存一个TCoolBands Bitmap:在TcoolBand区显示图像 Constraints:指定组件宽度和高度最大和最小...:为下拉列表项目选择图片 ItemHeight:下拉列表中项目的高度 ItemsEx:对下拉列表中项目进行操作 SelText:选定文本 Style:下拉列表样式 StyleEx

    4.9K10

    HTML第二天

    单选框:**** 有相同 name 属性单选框为一组,一组中同时只能有一个被选中 checked–默认选中...” multiple>** multiple–多文件选择 按钮:**** 提交按钮,提交数据给后端服务器 重置按钮,恢复表单默认 <type...submit–提交按钮 reset–重置按钮 button–普通按钮 谷歌浏览器中 button 默认是提交按钮 button 标签是双标签,更便于包裹其他内容:文字、图片等 select 下拉菜单标签...select 标签:下拉菜单整体 option 标签:下拉菜单每一项 select 标签语法 selected:下拉菜单默认选中 textarea 文本域标签 textarea— 提供可输入多行文本表单控件...”></label id 属性在 input 里面写 1️⃣使用方法: 1、使用 label 标签把内容(:文本)包裹起来 2、在表单标签上添加 id 属性 3、在 label 标签 for 属性中设置对应

    3K20

    文档和元素几何滚动

    还有一个onreset事件处理程序来检测表单重置。表单提交前将会调用onsubmit程序,如果回调函数返回为false则会取消表单提交动作。这是js程序一个用来检查用户输入错误。...当用户在一个文本域输入文本或从下拉列表中选择一个选项就触发change事件,当用户在一个文本域中该数据不是每次用户输入一个键值时都会触发该事件。它仅仅当用户改变了才会触发该事件。...提交和重置元素本就是按钮,不同是它们有与之相关联默认动作。 即,按钮和超链接类似,都具有共同作用。 开关按钮 复选框和单选元素为开关按钮,或称之为有两种视觉状态按钮。即选中或未选中。...单选元素为整组有相关性元素而设计,组内所有按钮HTML属性name都相同。按照这种方式创建按钮为互斥。利用表单属性名字选中元素时,它返回一个类数组对象而不是单个元素。...单选和复选框都定义了checked属性,指定了元素当前是否选中。defaultChecked属性也为布尔,为htmlchecked,指定了元素在第一次加载页面时是否选中

    5.2K00

    VCL 控件分类_验证控件分类

    TPopupMenu 创建完弹出菜单按钮和事件,将需要该菜单控件PopupMenu事件绑定该菜单 。...Columns:列表所显示栏数 MultiSelect:是否支持多选 Sorted:是否按字母顺序进行排序 ItemIndex:列表中被选中选项序号。...:设置或返回某项是否被选中 TComboBox Text:当前选项内容 DropDownCount:下拉框显示项数,超过则加上垂直滚动条 Items:String型对象,表示下拉 MaxLength:...:还可显示图片;csOwnerDrawVariable:图片和字符串选项高度相同;csSimple:只能用户输入) Index:组合框中被选中序号 OnChange(); 在下拉列表中添加或删除字符时会触发...发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    4.3K10

    salesforce零基础学习(七十四)apex:actionRegion以及apex:actionSupport浅谈

    apex:actionRegion尽管可以用于ajax请求时候,指定区域提交,但是却无法定义请求完成reRender区域,reRender操作仍然在相关控件reRender部分来操作,即apex...demo举例:  1.TestActionSupportController:设置一个testOptions变量,初始是xxx,当调用changeOptions变成yyy 1 public with...,下拉列表控制着另外一个下拉列表显示。...其实上面的vf代码是有问题,当选择了下拉框,右侧下拉也不修改成yyy,原因是这样: 当actionSupport执行时,会提交整个form表单,因为上面有一个required字段,所以导致提交表单失败...,没有走action对应后台method,所以没有更新下拉框里面的,这种情况有两种可以修改方式,1是将actionSuuport设置成immediate="true"方式,可以忽略表单validation

    1.7K70

    select重复选择同一项,还可以触发onchange事件

    ="02">风格     颜色     预算 //下拉列表改变事件...$("#type").change(function () {     //要执行代码操作 }).mousedown(function () { //当按下鼠标按钮时候 this.sindex...= $(this)[0].selectedIndex; $(this)[0].selectedIndex = 0; //把当前选中值得索引赋给下拉选中索引 }).mouseout(function...= this.sindex; //就把下拉选中索引改变成之前选中值得索引,就默认选择是之前选中 } }); 当你重复点击同一项时候,你会发现根本不会执行onchange方法.大家可以依照上面的方法...,就可以实现重复点击时候也能够实现onchange方法了,有关select事件一些用法函数,请看我另一篇博文https://my.oschina.net/u/2306318/blog/1551225

    3.4K20

    分享5个关于 Vue 小知识,希望对你有所帮助

    大家好,今天分享几个和Vue相关小知识,希望对你有所帮助 1、在Vue.js中获取下拉框选择 有时候,我们希望在Vue.js中在选项改变时获取所选选项。...在onChange函数中,我们获取事件对象,并使用event.target.value获取所选属性。...这种功能在很多应用场景中都非常有用,以下是一些具体示例: 下拉菜单(Dropdown)或模态窗口(Modal):当用户点击下拉菜单或模态窗口外部区域,我们通常期望下拉菜单或模态窗口会关闭。...搜索自动完成(Search Autocomplete):在搜索框输入时,会出现一个自动完成下拉菜单。当用户在选中某个搜索建议或者点击搜索框以外地方时,我们通常需要关闭这个自动完成菜单。...$options.filters.truncate,并传入要截断文本、截断文本字符数量以及截断文本缩写符号。 然后我们在模板中显示这段文本。

    21630

    AJAX入门这一篇就够了

    这时候就要用代理思想了 XMLHttpRequest先把请求提交给同域Servlet处理 同域Servlet再将XMLHttpRequest请求提交给跨域服务器 同域Servlet得到跨域服务器返回...监听下拉变化事件 只要下拉变化了,就与服务器进行交互 得到服务器返回,解析XML 使用DOM把数据写到城市下拉列表中 后台分析 得到前台带过来数据 判断该数据是什么,返回对应XML文件...= function () { /**********定位到下拉框,获取下拉***************/ // 获取选中下拉框索引 var...= function () { // 得到选中下拉 var provinceValue = this.options[this.selectedIndex...areaSelect.options.length = 1; //得到选择选中下拉 var cityValue = this.options[this.selectedIndex

    4.9K91
    领券