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

  1. select表单元素详解及下拉列表模拟实现

    原文地址:→看过来 写在前面 select 是HTML表单元素中很常用的一个,其中很重要的几个属性常被忽略,但这几个属性却能帮助我们完成很多的功能,当然,select下拉列表默认样式很不友好,所以更多 ...

  2. 两个select之间的元素互相移动并保持顺序

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. :input 匹配所有 input, textarea, select 和 button 元素

    描述: 查找所有的input元素,下面这些元素都会被匹配到. HTML 代码: <form> <input type="button" value="I ...

  4. 用select提取List元素自身序号

    var cs = currentCitys.Select((c, i) => new { id = c.CITY_ID, 序号 = (i + 1).ToString(), 城市类型 = c.IS ...

  5. 表单元素-select

    <form> <select size="2"> <option value="JMS HADEN">JMS HADEN&l ...

  6. 自己写的select元素可编辑、可筛选JQuery插件 jquery.inputselectbox.js

    /* 功能:实现对select下拉框可输入的功能, 输入时会对下拉框的内容进行动态过滤. 参数:没有选择任何值时默认显示的文字 如何使用:$("#firstLevel").inpu ...

  7. JS对select动态添加options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态 ...

  8. [JavaScript]JS对select动态options操作[IE&FireFox兼容]

    <select id="ddlResourceType" onchange="getvalue(this)"></select>     ...

  9. JS对select动态添加options操作(主流浏览器兼容)

    之前项目中,遇到一个表单提交的页面,里面有多级下拉框联动的复杂逻辑,因此当时在做的过程中也是学到了不少容易出现问题的地方,下面就整理下当时遇到的一些关于下拉框的操作,并指出其中的一些注意点和坑: 有如 ...

随机推荐

  1. 爬虫——requests模块

    一 爬虫简介 #1.什么是互联网? 互联网是由网络设备(网线,路由器,交换机,防火墙等等)和一台台计算机连接而成,像一张网一样. #2.互联网建立的目的? 互联网的核心价值在于数据的共享/传递:数据是 ...

  2. ORACLE在IMP时候出现数据丢失

    IMP-00019: 由于 ORACLE 错误 12899 而拒绝行 IMP-00003: 遇到 ORACLE 错误 12899 ORA-12899: 列 "JACKEYJ".&q ...

  3. CUDA compiler driver nvcc 散点 part 1

    ▶ 参考[https://docs.nvidia.com/cuda/cuda-compiler-driver-nvcc/index.html] ▶ nvcc 预定义的宏 __NVCC__ // 编译 ...

  4. CentOS内网机器利用iptables共享公网IP上网

    公司有个业务是2B的以及日活不大,所以两台服务器搞定,一个6M EIP.两台机器都是CentOS7系统EIP为 xxx.xxx.xxx.xxx绑在 内网ip为 172.18.30.175的服务器上,内 ...

  5. VC6的工程转到VC2010或更高版本出现fatal error C1189编译错误的解决方法

    以前也遇到过,当时解决了没写下来,这次正好又遇到了,就顺手写一下吧,别下次又忘记了. 当VC6的工程转到VC2010或更高版本时编译出现如下错误: c:\program files\microsoft ...

  6. list中null或者空的区别

    1.list 空 默认值是空,即没有值 null 理解为没有对list集合分配内存空间,实际上压根就不存在. 也可以这样理解: null  未建立对象 空    建立对象未放入值 例如  我有一个空着 ...

  7. linux环境下安装oracle步骤和自启动oracle

    oracle安装步骤 一.创建用户 --注释-- /etc/passwd 用户配置文件 /etc/shadow 用户密码文件 /etc/group 组 组用户文件/etc/gshadow 组密码文件 ...

  8. c++ 中的数字和字符串的转换

    理由:一直忘记数字型的字符串和数字之间的转换,这次总结一下,以便后面再次用到. 其实 C++ 已经给我们写好了相应的函数,直接拿来用即可 QA1:如何把一个数字转换为一个数字字符串?(这个不是很常用) ...

  9. Cocos2dx Android工程的启动过程

    1.安卓工程下的设置启动activity为src下面的AppActivity,启动调用的onCreate并没有做过多的事情,只是调用了父类Cocos2dxActivity的onCreate.AppAc ...

  10. Win7上安装scapy

    1.环境 操作环境:win7 python版本:python3.5 依赖模块:Npcap(推荐)或WinPcap 下载scapy 2.安装步骤 操作环境,python及依赖模块安装省略(一直点击下一步 ...