how to get selected option text in javascript
how to get selected option text in javascript
refs
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/options
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex
https://developer.mozilla.org/en/docs/Web/API/HTMLSelectElement
others
https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/item
question
solution
// e.target
temp1.options[temp1.selectedIndex].text;
// "五楼"
temp1.selectedOptions[0].text;
// "五楼"
OK
There are two solutions, as far as I know.
both that just need using vanilla javascript
1 selectedOptions
<div class="select-box clearfix">
<label for="area">Area</label>
<select id="area">
<option value="101">A1</option>
<option value="102">B2</option>
<option value="103">C3</option>
</select>
</div>
const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);
areaSelect.addEventListener(`change`, (e) => {
// log(`e.target`, e.target);
const select = e.target;
const value = select.value;
const desc = select.selectedOptions[0].text;
log(`option desc`, desc);
});
2 options
<div class="select-box clearfix">
<label for="area">Area</label>
<select id="area">
<option value="101">A1</option>
<option value="102">B2</option>
<option value="103">C3</option>
</select>
</div>
const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);
areaSelect.addEventListener(`change`, (e) => {
// log(`e.target`, e.target);
const select = e.target;
const value = select.value;
const desc = select.options[select.selectedIndex].text;
log(`option desc`, desc);
});
how to get selected option text in javascript的更多相关文章
- get the text value of a selected option.
<select id="myselect"> <option value="1">Mr</option> <optio ...
- [工具] 解决sublime text运行javascript console无输出问题
1.使用nodeJS在sublime text 运行javascript 下载安装nodeJS 在sublime text新建build system:tools->build system-& ...
- element-ui select get selected option object
element-ui select get selected option object value-key="value" === String :value="{va ...
- 使用 Sublime Text 做 Javascript 编辑器 - 集成 SublimeCodeIntel 实现代码智能提示及自动完成
Sublime Text 是一个强大并具有很强扩展性的 IDE,可通过为其安装 SublimeCodeIntel 插件实现代码智能提示和自动完成功能. 目前该插件支持以下语言: JavaScript, ...
- 使用 Sublime Text 做 Javascript 编辑器 - 集成 JSHint 问题检测工具
JSHint(jshint.com)是 Javascritp 代码质量工具,可以帮助开发人员发现 Javascript 代码中的错误和潜在的问题.jshint.com 是一个在线编辑器,我们可以为 S ...
- jquery change dropdownlist selected option
<select name="corporation"> <option value="1">corporation1</optio ...
- 【sublime】sublime Text 3 javaScript代码自动提示插件&安装步骤 &启动Debug模式
最近使用sublime开发node.js,但是sublime的js代码在书写的时候并没有提示功能. 因此搜到资料,用于安装代码自动提示插件. 1.打开sublime,然后快捷键Ctrl+Shift+P ...
- thinkPHP中省市级联下拉列表
公共函数放置位置common文件夹下common.php文件(此段代码也可放置在要使用的控制器中) 封装的下拉列表函数代码: /** * 根据列表拼装成一个下拉列表 ADD BY CK * @para ...
- vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别
一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...
随机推荐
- 判断2个list中是否有相同的数据(相交)Collections.disjoint
https://blog.csdn.net/yang_niuxxx/article/details/85092490 private void initData() { for (int i = 0; ...
- Excel通配符
数据科学交流群,群号:189158789 ,欢迎各位对数据科学感兴趣的小伙伴的加入!
- 最短路-Bellmm-ford算法
Bellmm-ford算法 解决什么样的问题 有边数限制的最短路,存在负权边,负环 概念 通俗的来讲就是:假设 1 号点到 n 号点是可达的,每一个点同时向指向的方向出发,更新相邻的点的最短距离,通过 ...
- (八)整合 Dubbo框架 ,实现RPC服务远程调用
整合 Dubbo框架 ,实现RPC服务远程调用 1.Dubbo框架简介 1.1 框架依赖 1.2 核心角色说明 2.SpringBoot整合Dubbo 2.1 核心依赖 2.2 项目结构说明 2.3 ...
- Kubernetes --(k8s)yml 文件
认识yml文件 yaml文件语法 大小写敏感 使用缩进表示层级关系 缩进时不允许使用Tab键,只允许使用空格. 缩进的空格数目不重要,只要相同层级的元素左侧对齐即可 # 表示注释,从这个字符一直到行尾 ...
- OSPF特殊区域和LSA
OSPF路由计算优选次序: (1) 直连路由:本路由器发起的LSA 1.2: (2) 区域内路由:O: LSA 1.2: (3) 区域间路由:O IA: LSA 3: (4) 1类外部路由:O E1: ...
- cassandra权威指南读书笔记--数据建模
没有join操作.有轻量级事务和批处理,但是没有外键等.反规范化.3.0支持物化视图,允许在一个表上创建数据的多个物化视图.使用cassandra要从查询入手,而不是先从数据模型开始.先对查询建模,然 ...
- shell脚本将字符串按指定分隔符切分成数组
Shell 数组用括号来表示,元素用"空格"符号分割开,语法格式如下: array_name=(value1 value2 ... valuen) keyword=1,sdg,dd ...
- Eclipse无法查看Servlet源代码的解决方案
在Apache官方网站中选择你对应的tomacat版本下载对应的Tomcat的源码 下载Source Code Distributions下的zip 将下载的zip文件复制到lib文件夹下 在提示页面 ...
- Educational Codeforces Round 91 (Rated for Div. 2) B. Universal Solution
题目链接:https://codeforces.com/contest/1380/problem/B 题意 你在和一个机器人玩石头剪刀布,给出一个长为 $n$ 的出拳序列,机器人会从某一处开始出拳 $ ...