普通的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. 深入了解scanf()/getchar()和gets()/cin等函数

    转:http://www.cnblogs.com/FCWORLD/archive/2010/12/04/1896511.html 转:问题描述一:(分析scanf()和getchar()读取字符) s ...

  2. Servlet-知识点

    2018年10月05日 16:52:56 yigg 阅读数:38   1.JavaWeb开发的目录结构 https://blog.csdn.net/u012661010/article/details ...

  3. OOM问题定位

      一:堆内存溢出 Java创建的对象一般都是分配在堆中,如果是由于过期对象没能回收(内存泄漏)或者对象过多导致放不下(内存溢出),一般报错: Exception in thread \"m ...

  4. Android 开发 深入理解Handler、Looper、Messagequeue 转载

    转载请注明出处:http://blog.csdn.net/vnanyesheshou/article/details/73484527 本文已授权微信公众号 fanfan程序媛 独家发布 扫一扫文章底 ...

  5. [UnityShader基础]05.模板测试

    参考链接: https://blog.csdn.net/u011047171/article/details/46928463 https://blog.csdn.net/JohnBlu/articl ...

  6. win10 安装 oracle 11g

    在安装文件的/stage/cvu文件夹下面找到文件 cvu_prereq.xml文件 64位添加红色部分 32位添加蓝色部分   ............... </OPERATING_SYST ...

  7. PHPsocket、CURL、File_get_contents采集

    1.socket采集.采用最底层的,它只是建立一个长连接,然后我们自己构造http协议字符串去发送请求.例如想获取这个页面内容(http://tv.youku.com/?spm=a2hww.20023 ...

  8. Elasticsearch 整合spring(不是sprig boot)

    公司做统计任务,有使用Es做聚合操作,使用的是自己封装的版本,这边整合下原生spring,做下学习记录,随便看一下,发现差不多都是spring boot的案例...我该怎么办,...发现整合的过程其实 ...

  9. python入门 -- 学习笔记2

    习题11:提问 --  接受键盘的输入  raw_input input() 和 raw_input() 有何不同? input() 函数会把你输入的东西当做 Python 代码进行处理,这么做会有安 ...

  10. 十七、 Observer 观察者设计模式

    设计: 代码清单: Observer public interface Observer { void update(NumberGenerator generator); } DigitObserv ...