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操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
随机推荐
- PHP常用的转义函数
1. addslashes addslashes对SQL语句中的特殊字符进行转义操作,包括(‘), (“), (), (NUL)四个字符,此函数在DBMS没有自己的转义函数时候使用,但是如果DBMS有 ...
- linux服务之ntp与dns篇
ntp复习: 简介:对于计算机时间的同步管理操作服务器 部署:(服务端和客户端或者说集群) 1.服务端下载ntp 2.打开配置文件/etc/ntp.conf: server 127.127.1.0 ...
- 如何使用jQuery从字符串中删除最后一个字符
如何使用jQuery从字符串中删除最后一个字符 1.string.slice(0,-1) 2.str.substring(0,str.length-1)
- [Oracle,2018-03-01] oracle常用函数
最近经常用到一些oracle中的函数,今天就总结一些常用的: 一.单行函数 只处理单个行,并且为每行返回一个结果. 1.字符函数 (1)concat(str1,str2)字符串拼接函数 select ...
- Docekr 挂在卷之后访问目录时异常 cannot open directory '.': Permission denied 的解决办法
1,原因,原因是CentOS7 中的安全模块 selinux 把权限禁掉了 2,解决办法如下 2.1,运行容器是加参数在 --privileged=true (个人认为这是最佳方式,推荐使用) 如 ...
- 移动平台MOBA发热与帧率优化
MOBA项目的优化进入到了第二阶段,千元机,发热严重问题处理,及帧率进一步提升. 回顾之前的优化,当初我的 OPPO R9S不过8-10帧,后来经过了逻辑计算的一些优化后达到10-20帧. 再后来开启 ...
- docker 网络配置
先随便写几行命令 随后一点点的补充 端口映射实现访问容器. run -d -P training/webapp python app.py run -d -p 5000:5000 training/w ...
- 微商城项目 请求接口封装中出现 callback && callback() 原理
http://www.imooc.com/wenda/detail/522579 因为逻辑运算符&& ||通常具有短路求值的特性即,如果只求部分值就可以得到整个表达式的值,那么剩下的部 ...
- CentOS 性能监测命令
1.实时监测命令(watch) -d 高亮显示变化 -n 间隔多久(s) 执行后面的command #每隔1秒显示空间使用情况并列出当前目录下的列表信息 EX:watch -d -n 1 'df -h ...
- 43 【redis cluster】
有两篇文章不错,可以看下: 1,初步理解redis cluster:https://blog.csdn.net/dc_726/article/details/48552531 2,仔细理解redis ...