select和其元素options
普通的select形式为:
<select>
<option>选中元素1</option>
<option>选中元素2</option>
<option>选中元素3</option>
<option>选中元素4</option>
</select>
这样的select没有意义,只作为学习。
正常的使用select是需要获得options中选中的值:
代码为:
<select id="sel1" onchange="dianji()">
<option value="Apple">苹果</option>
<option value="orange">橘子</option>
<option value="banana">香蕉</option>
</select>
<br/><br/><br/>
<input type="button" value="点击获取选中内容" onclick="dianji()"/>
</body> <script type="text/javascript">
function dianji()
{
var nodeSel1=document.getElementById("sel1"); //获取select元素
var index = nodeSel1.selectedIndex; // 选中项的索引
var text = nodeSel1.options[index].text; // 选中项的文本
var value = nodeSel1.options[index].value; // 选中项的值
alert("您选择的是:"+text+" 它的值是:"+value);
}
</script>
效果图为:
select和其元素options的更多相关文章
- select表单元素详解及下拉列表模拟实现
原文地址:→看过来 写在前面 select 是HTML表单元素中很常用的一个,其中很重要的几个属性常被忽略,但这几个属性却能帮助我们完成很多的功能,当然,select下拉列表默认样式很不友好,所以更多 ...
- 两个select之间的元素互相移动并保持顺序
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- :input 匹配所有 input, textarea, select 和 button 元素
描述: 查找所有的input元素,下面这些元素都会被匹配到. HTML 代码: <form> <input type="button" value="I ...
- 用select提取List元素自身序号
var cs = currentCitys.Select((c, i) => new { id = c.CITY_ID, 序号 = (i + 1).ToString(), 城市类型 = c.IS ...
- 表单元素-select
<form> <select size="2"> <option value="JMS HADEN">JMS HADEN&l ...
- 自己写的select元素可编辑、可筛选JQuery插件 jquery.inputselectbox.js
/* 功能:实现对select下拉框可输入的功能, 输入时会对下拉框的内容进行动态过滤. 参数:没有选择任何值时默认显示的文字 如何使用:$("#firstLevel").inpu ...
- JS对select动态添加options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...
- [JavaScript]JS对select动态options操作[IE&FireFox兼容]
<select id="ddlResourceType" onchange="getvalue(this)"></select> ...
- JS对select动态添加options操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
随机推荐
- HashMap与Hashtable
1. 1) Hashtable继承自Dictionary类,HashMap是map接口的一个实现类(继承自AbstractMap抽象类) 2) 在HashMap中,null可以 ...
- java多线程—Runnable、Thread、Callable区别
多线程编程优点 进程之间不能共享内存,但线程之间共享内存非常容易. 系统创建线程所分配的资源相对创建进程而言,代价非常小. Java中实现多线程有3种方法: 继承Thread类 实现Runnable接 ...
- SpringMVC工作原理示意图
上面的是springMVC的工作原理图: 1.客户端发出一个http请求给web服务器,web服务器对http请求进行解析,如果匹配DispatcherServlet的请求映射路径(在web.xml中 ...
- 关于h5使用bpmn.js
bpmn.js网站地址:https://bpmn.io/toolkit/bpmn-js/ bpmnjs是一款工作流绘制框架,遵循了bpmn2.0规范,实现从前台绘制工作流到后台执行的效果. 图示: 但 ...
- 创建列表明细应用1-使用fragment
笔记自<Android编程权威指南第二版> 第七章,创建一个列表明细应用 fragment是一种控制器对象,activity可委派它完成一些任务,这些任务通常就是管理用户界面.(管理用户界 ...
- ios unicode
转义字符,反斜扛\ \u 后跟4位16进制数 \U 后跟8位16进制数
- 深度学习VS机器学习——到底什么区别
转自:https://baijiahao.baidu.com/s?id=1595509949786067084&wfr=spider&for=pc 最近在听深度学习的课,老师提了一个基 ...
- Delphi TXLSReadWriteII导出Excel
TXLSReadWriteII导出Excle (有点复杂,可以自己简化一下,直接从项目中抓取的) procedure TformSubReport.DataToExcel(_Item: Integer ...
- zend studio mac
zend studio mac是一款PHP语言集成开发环境(IDE),专为开发人员研发,它包含了所有组件的开发为完整的PHP应用程序生命周期提供条件.zend studio是很多开发人员.程序员等专业 ...
- 洛谷P1169 棋盘制作(悬线法)
题目链接:https://www.luogu.org/problemnew/show/P1169 #include<bits/stdc++.h> #define fi first #def ...