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操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
随机推荐
- kubernetes学习笔记之十三:基于calico的网络策略入门
一..安装calico [root@k8s-master01 ~]# kubectl apply -f https://docs.projectcalico.org/v3.3/getting-star ...
- Flask与WSGI
刚开始接触到python及Flask框架时,总是会听到 wsgi等等相关的名词,以及 项目部署时会用到nginx+gunicorn等等,但是对于一个请求从 nignx到gunicorn再到falsk框 ...
- leetCode27.移除元素
给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成 ...
- nginx+python+windows 开始_02
接上文:http://www.cnblogs.com/tacyeh/p/4790112.html 一.改造helloWorld.py import web urls = ('/', 'Home', ' ...
- Tesseract-OCR的简单使用与训练
Tesseract,一款由HP实验室开发由Google维护的开源OCR(Optical Character Recognition , 光学字符识别)引擎,与Microsoft Office Docu ...
- 4-29 c语言之栈,队列,双向链表
今天学习了数据结构中栈,队列的知识 相对于单链表来说,栈和队列就是添加的方式不同,队列就相当于排队,先排队的先出来(FIFO),而栈就相当于弹夹,先压进去的子弹后出来(FILO). 首先看一下栈(St ...
- Python入门:Anaconda和Pycharm的安装和配置
Python入门:Anaconda和Pycharm的安装和配置 转自:https://www.cnblogs.com/yuxuefeng/articles/9235431.html 子曰:“工欲善其 ...
- maven项目update报错
MAVEN项目报错:An internal error occurred during: "Updating Maven Project" java.lang.NullPoint ...
- c++ 面试题(操作系统篇)
1,消息队列: https://kb.cnblogs.com/page/537914/ 2,fork中父进程和子进程的资源联系: https://blog.csdn.net/weixin_422506 ...
- 回忆Partition算法及利用Partition进行快排
一.Partiton算法 Partiton算法的主要内容就是随机选出一个数,将这个数作为中间数,将大于它的排在它右边,小于的排在左边(无序的). int partition (int arr[],in ...