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的更多相关文章

  1. get the text value of a selected option.

    <select id="myselect"> <option value="1">Mr</option> <optio ...

  2. [工具] 解决sublime text运行javascript console无输出问题

    1.使用nodeJS在sublime text 运行javascript 下载安装nodeJS 在sublime text新建build system:tools->build system-& ...

  3. element-ui select get selected option object

    element-ui select get selected option object value-key="value" === String :value="{va ...

  4. 使用 Sublime Text 做 Javascript 编辑器 - 集成 SublimeCodeIntel 实现代码智能提示及自动完成

    Sublime Text 是一个强大并具有很强扩展性的 IDE,可通过为其安装 SublimeCodeIntel 插件实现代码智能提示和自动完成功能. 目前该插件支持以下语言: JavaScript, ...

  5. 使用 Sublime Text 做 Javascript 编辑器 - 集成 JSHint 问题检测工具

    JSHint(jshint.com)是 Javascritp 代码质量工具,可以帮助开发人员发现 Javascript 代码中的错误和潜在的问题.jshint.com 是一个在线编辑器,我们可以为 S ...

  6. jquery change dropdownlist selected option

    <select name="corporation"> <option value="1">corporation1</optio ...

  7. 【sublime】sublime Text 3 javaScript代码自动提示插件&安装步骤 &启动Debug模式

    最近使用sublime开发node.js,但是sublime的js代码在书写的时候并没有提示功能. 因此搜到资料,用于安装代码自动提示插件. 1.打开sublime,然后快捷键Ctrl+Shift+P ...

  8. thinkPHP中省市级联下拉列表

    公共函数放置位置common文件夹下common.php文件(此段代码也可放置在要使用的控制器中) 封装的下拉列表函数代码: /** * 根据列表拼装成一个下拉列表 ADD BY CK * @para ...

  9. vue学习笔记(一)关于事件冒泡和键盘事件 以及与Angular的区别

    一.事件冒泡 方法一.使用event.cancelBubble = true来组织冒泡 <div @click="show2()"> <input type=&q ...

随机推荐

  1. muduo 网络库的整体架构图和一个简化版本的架构设计

    https://blog.csdn.net/adkada1/article/details/54342275 简析 https://blog.csdn.net/amoscykl/article/det ...

  2. chmod a+w . 权限控制 su、sudo 修改文件所有者和文件所在组 添加用户到sudoer列表中 当前用户信息

    对当前目录对所有用户开放读写权限 chmod a+r . $ sudo chmod -R a+w /usr/lib/python2.7 所有用户添加文件的写权限 [linux]su.sudo.sudo ...

  3. ECMAScript6常用新特性总结

    一.let声明变量 1.基本用法: ES6 新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 如下代码: { let a = 10; var ...

  4. (22)zip命令:压缩文件或目录&&unzip命令:解压zip文件

    1.zip 命令基本格式如下: [root@localhost ~]#zip [选项] 压缩包名 源文件或源目录列表 注意,zip 压缩命令需要手工指定压缩之后的压缩包名,注意写清楚扩展名,以便解压缩 ...

  5. Java复习整理 day01

    练习代码: 1 //这条语句说明这个Java文件在demo的包下 2 package demo1; 3 /** 4 * 5 * @author 王兴平 6 * 这个是第一个hello world 案例 ...

  6. idea使用maven的打包工具package不会打上主类解决方法

  7. 【uva 1153】Keep the Customer Satisfied(算法效率--贪心+优先队列)

    题意:有N个工作,已知每个工作需要的时间和截止时间.要求所有工作穿行完成,第一项任务开始的时间不早于时刻0.问最多能完成多少个工作.(N≤800000) 解法:贪心.可以模型化题目为:已知N个任务的长 ...

  8. 【noi 2.6_1481】Maximum sum(DP)

    题意:求不重叠的2段连续和的最大值. 状态定义f[i]为必选a[i]的最大连续和,mxu[i],mxv[i]分别为前缀和后缀的最大连续和. 注意:初始化f[]为0,而max值为-INF.要看好数据范围 ...

  9. 02、scrapy安装

    1.安装scrapy 采用pip的安装方式,从豆瓣源获取 pip install -i https://pypi.douban.com/simple/ scrapy 安装过程中会报出错误: build ...

  10. 手摸手带你学移动端WEB开发

    HTML常用标签总结 手摸手带你学CSS HTML5与CSS3知识点总结 手摸手带你学移动端WEB开发 好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/Ro ...