普通的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. 手机App调试(Android)

    方法一:  用Chrome+手机来调试.1) 在PC上安装谷歌的USB驱动:         http://developer.android.com/sdk/win-usb.html#top     ...

  2. Alpha阶段项目规划

    Alpha阶段任务 概述 我们团队采访学长并听从学长的意见之后,决定根据第一版的phylab项目进行重构.但由于第一版的phylab项目在github上的代码仅仅只有alpha版本,我们接手之后进行了 ...

  3. ORM对象关系映射

    ORM 总结: ORM:对象关系映射 作用: 1.将定义数据库模型类--> 数据库表 2.将定义数据库模型类中的属性--->数据库表字段 3.将模型对象的操作(add,delete,com ...

  4. leetcode3

    public class Solution { public int LengthOfLongestSubstring(string s) { var dic = new Dictionary< ...

  5. Win10系统进行远程桌面连接出现身份验证错误怎么办

    在win10系统中,自带有远程桌面连接功能,但是有时候会遇到一些问题,比如有不少用户反映说在进行远程桌面连接的时候,出现身份验证错误的情况,导致远程连接失败,接下来给大家分享一下Win10系统进行远程 ...

  6. python中configpraser模块

    configparser   模块 解析配置文件模块 什么是配置文件? 用于编写程序的配置信息的文件 什么是配置信息? 为了提高程序的扩展性 #configparser模块的使用 #首先我们需要知道配 ...

  7. js中子窗口调用父窗口中的变量、函数

  8. ceph常用运维技巧总结1

    格式 json 数据增强可读性 --format json-pretty -f json-pretty ceph quorum_status -f json-pretty ceph mon_statu ...

  9. 框架和内嵌框架--->frameset 和 iframe 的文档对象

    框架和内嵌框架分别用 HTMLFrameElemnt 和 HTMLIFrameElement 表示,它们在 DOM2 中有一个新属性----->contentDocument,是一个指针,表示框 ...

  10. python中assert详解

    assert基础 官方解释:"Assert statements are a convenient way to insert debugging assertions into a pro ...