取得 改变前 的 select下拉框的值

最新推荐文章于 2025-02-27 15:32:53 发布
原创 最新推荐文章于 2025-02-27 15:32:53 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种在网页选择框中保留用户之前选择值的方法。通过为<select>元素添加old属性，可以确保即使页面重新加载，用户的选择也不会丢失。这种方法适用于各种前端开发场景。

<select onclick="this.old = this.value">

 

old属性就是 之前的值

陆奥七云
关注
el-select中多选回显数据后没法重新选择和更改
疑问 搜索 动手 解决 记录
03-02 1万+
<el-select v-model="list" filterable multiple @change="$forceUpdate()"></el-select> 标签里加个@change="$forceUpdate()" 就好了
element el-select+el-checkbox多选实现二级联动单个选项禁用效果以及选中选项对应表头高亮:header-cell-style（中级）
敲代码无敌小奶龙的博客
01-14 4346
element el-select+el-checkbox多选实现下拉框二级联动+禁用单个选项+选中选项对应表头高亮。
获取select下拉框选中之前的值
yili0000a的博客
05-11 5581
<selectid="mysel"> <optionvalue="1">1</option> <optionvalue="2">2</option> <optionvalue="3">3</option> <optionvalue="4">4</option> </...
vb combobox list里面内容根据前面选项变换
09-01
能够实现combobox list 里面内容自动变化
Vue 表单优化：下拉框值改变前的确认提示与还原逻辑实现
最新发布
小金子J的博客
02-27 1048
本文探讨了在 Vue 项目中实现下拉框值改变前确认提示的实用方法。通过 el-select 组件，我们利用 this.$refs 获取下拉框改变前的值，并结合 this.$confirm 弹出确认框。用户确认后，清空相关数据并更新下拉框值；取消操作时，则还原原始值。文章还解决了下拉框失焦问题，通过调用 blur() 方法关闭下拉框，确保交互逻辑的流畅性。这种实现不仅提升了用户体验，还避免了误操作导致的数据丢失。
解决layui下拉框监听问题(监听不到值的变化)
10-16
layui框架为下拉框组件提供了一个监听事件`select`，通过该事件可以监听到下拉框值的变化。官方文档提供的监听方式如下： ```javascript form.on('select(demo)', function(data) { console.log(data.value); // ...
【考试中心项目记录】
weixin_50538763的博客
02-07 448
1、编辑页el-select赋值过后下拉框不能改变解决方法 2、获取el-select整条对象的数据 3、同时调用多个接口会存在同步异步问题 4、默认选中el-tree第一个父节点 5、级联选择器
javascript获取下拉列表框当中的文本值示例代码
10-27
在本篇文章中，将详细探讨如何使用JavaScript语言在网页中获取用户在下拉列表框（select元素）中选择的文本值。当下拉列表框中的选项发生变化时（即用户选择了新的选项），我们将利用JavaScript来捕获这个变化，并...
comfyui 下拉框
02-07
// JavaScript用于取得或设定<select>元素的选择状态 const selectElement = document.getElementById('exampleSelect'); console.log(selectElement.value); // 输出所选项目的'value'属性值 selectElement.value =...
获取下拉框select上次选择的值
wang_xiao_ye的博客
02-21 5114
获取下拉框select上次选择的值 如图所示，如果我们需要获取select的当前选中项，直接用on-change事件直接返回就行，但有些情况下，我们需要获取上一次选中的值来做一些判断： <Row> <Col :span="12"> <FormItem label="类型"> <Select ref="typeSelect" v-m...
如何取select标签改变前后的值
Mr_Runner的博客
11-21 4844
问题：如何取select标签改变前后的值 解决方案：如下代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;select onmousedown="onmousedownFunction(this)" onchange="onchangeFunction(this)"&gt; &lt;option value="A&q
4种方法获取select下拉框标签中的值
weixin_30950607的博客
05-10 1366
选中下拉框中“上海” 代码如下：<select id="province" class="select" name="province"> <option value="0">请选择</option><option value="5">上海</option><option value="7">北京</option&g...
获取Select标签修改之前的值
热门推荐
koastal的博客
11-12 1万+
select标签在修改内容时，会触发change事件，在该事件中可以获取修改之后的值，而修改之前的值是获取不到的。目前有一个需求是，当用户修改select的内容时，弹出确认框询问用户是否确认修改，如果用户点击取消，则select标签的值重置为修改之前的值。解决思路，为select标签添加hook属性，用于保存select标签当前的值，当select触发change事件时，hook属性的值保存了修改之
form表单中的 下拉菜单 所有的省份
weixin_30376083的博客
06-02 2853
<p style="margin-bottom:30px;"><span style="color:red;">*</span>所属省份：<select style="height:40px;margin-left:24px;"><option value="">--请选择省份--</option><option va...
省市区三级联动下拉框前后端怎样搭配
02-06
### 实现省市区三级联动下拉框的前后端配合方法 #### 后端设计 为了实现省市区三级联动功能，后端需要提供API接口来获取省份、城市以及区县的数据。通常情况下，这些数据会存储在一个数据库表中，并通过RESTful API的形式暴露给前端调用。 假设有一个名为`areas`的表格用于保存地区信息，其中包含字段:id, name, parent_id (上级区域ID)，那么可以创建三个不同的路由分别用来查询不同级别的行政区划列表[^1]： - `/api/provinces`: 获取所有省级单位的信息； - `/api/cities/{provinceId}`: 根据传入的具体省份id参数返回对应的城市集合； - `/api/districts/{cityId}`: 类似于上面那个URL模式，只不过这次是依据城市的唯一标识符去查找其下属的所有县级行政单位。 对于每一个请求路径而言，在接收到客户端发来的HTTP GET请求之后，服务器应当解析出必要的查询条件并执行相应的SQL语句完成检索操作；最后再把得到的结果集转换成JSON格式响应体发送回去供前端页面渲染使用[^2]。 ```python from flask import Flask, jsonify, request app = Flask(__name__) @app.route('/api/provinces', methods=['GET']) def get_provinces(): provinces_data = [ {"id": "1", "name": "北京市"}, {"id": "2", "name": "上海市"} ] return jsonify(provinces_data) @app.route('/api/cities/<string:province_id>', methods=['GET']) def get_cities_by_province(province_id): cities_data = [{"id": f"{province_id}-1", "name": f"City {province_id}A"}] return jsonify(cities_data) @app.route('/api/districts/<string:city_id>', methods=['GET']) def get_districts_by_city(city_id): districts_data = [{"id": f"{city_id}-1", "name": f"District {city_id}A"}] return jsonify(districts_data) ``` #### 前端开发 在HTML文档内部定义好容器标签以便放置各个级别选项卡组件，同时引入JavaScript库（如jQuery或Axios）简化AJAX交互过程。当用户改变第一个select元素的选择项时触发事件监听器向后台发起异步加载命令取得下一层次级别的可选项目填充到下一个dropdown list里边去直到最后一层为止[^3]。 ```html <select id="province"> <!-- Options will be populated via AJAX --> </select> <select id="city"> <!-- Options will be populated based on selected province --> </select> <select id="district"> <!-- Options will be populated based on selected city --> </select> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function () { axios.get('/api/provinces') .then(response => populateOptions('#province', response.data)); document.getElementById('province').addEventListener('change', event => { const provinceId = event.target.value; if (!provinceId) return; axios.get(`/api/cities/${provinceId}`) .then(response => populateOptions('#city', response.data)); clearSelectElement('#district'); }); document.getElementById('city').addEventListener('change', event => { const cityId = event.target.value; if (!cityId) return; axios.get(`/api/districts/${cityId}`) .then(response => populateOptions('#district', response.data)); }); }); function populateOptions(selector, data){ let selectElm = $(selector); selectElm.empty(); $.each(data,function(index,item){ $("<option>").val(item.id).text(item.name).appendTo(selectElm); }) } function clearSelectElement(selector){ $(selector).empty().append($("<option></option>")); } </script> ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值