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操作(主流浏览器兼容)
之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...
随机推荐
- linux服务之ntp与dns篇
ntp复习: 简介:对于计算机时间的同步管理操作服务器 部署:(服务端和客户端或者说集群) 1.服务端下载ntp 2.打开配置文件/etc/ntp.conf: server 127.127.1.0 ...
- 实战ELK(3) Kibana安装与简单实用
第一步:下载 https://artifacts.elastic.co/downloads/kibana/kibana-6.5.1-x86_64.rpm 第二步:安装 1.安装 yum install ...
- Linux下安装GitHub
安装GitHub 1.下载安装git: yum -y install git git-core git-doc 2.运行完执行 ssh-keygen -t rsa -C "your@emai ...
- 1. redis安装(windows)
Redis在windows下安装过程 转载自(http://www.cnblogs.com/M-LittleBird/p/5902850.html) 一.下载windows版本的Redis 去官网 ...
- 使用jQuery+huandlebars循环遍历中使用索引
兼容ie8(很实用,复制过来,仅供技术参考,更详细内容请看源地址:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html) & ...
- Hibernate 再接触 事务隔离机制
事务:要么都要完成,一个不完成就要回滚. ACID 原子性 一致性 独立性 持久性 第一类丢失更新 第一类丢失更新 脏读(读了另外一个事务没有提交的数据) 不可重复读(在同一个事务里,对数据库里的值前 ...
- R语言-图的要素颜色
1.设置图形要素的颜色 Plot函数中,使用col=参数来决定要素的颜色 如果不指定plot type,颜色加在散点上,如果指定了plot type,例如line,则颜色加在线上 其它函数,例如bar ...
- Jenkins安装时Web页面报错提示离线安装
先跳过所有. 方法1 先看它的提示:”参考离线Jenkins安装文档“发现链接点不开,我还以为是被墙了呢,FQ以后还是打不开.看来这个参考文档是没有用滴.点击配置HTTP代理跳出如下界面:安装Jenk ...
- 最小费用最大流 HDU1533
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1533 #include<bits/stdc++.h> #define fi first ...
- Python自动化测试用例设计--测试类型
1.前言 WEB自动化测试时候测试哪些类型,下面将介绍一下: 2. 测试类型 2.1 测试静态内容 静态内容测试是最简单的测试,用于验证静态的.不变化的UI 元素的存在性.例如: 每个页面都有其预期的 ...