前几天发了一篇关于javascript获取select值的方法，后来发现有另一种实现方法，所以就都发出来比较一下：

方法一：通过获取option标签的value值来确定：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>select</title>

</head>

<body>

    <form id="form1" name="form1">

        <select id="s1" name="s1" onChange="printTest();">

            <option selected="selected" value="0" >选项一</option>

            <option value="1">选项二</option>

            <option value="2">选项三</option>

        </select>

        <input type="submit" value="button"/>

    </form>

    <script type="text/javascript">

        function printTest() {

            var oSelect = document.getElementById('s1');

            var ind = oSelect.value;

            var val = oSelect.value;

            var tex = oSelect.options[oSelect.value].text;

            alert('ind = ' + ind + '\nval = ' + val + '\ntext = ' + tex);

        }

    </script>

</body>

</html>

这个方法需要为每个option标签定义一个value，而且value的值应为“0 1 2…”这样排序。

方法二：用javascript原装的selectIndex属性实现：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>select</title>

</head>

<body>

    <form id="form1" name="form1">

        <select id="s1" name="s1" onChange="printTest();">

            <option selected="selected" value="1" >选项一</option>

            <option value="2">选项二</option>

            <option value="3">选项三</option>

        </select>

        <input type="submit" value="button"/>

    </form>

    <script type="text/javascript">

        function printTest() {

            var oSelect = document.getElementById('s1');

            var ind = oSelect.selectedIndex;

            var val = oSelect.options[oSelect.selectedIndex].value;

            var tex = oSelect.options[oSelect.selectedIndex].text;

            alert('ind = ' + ind + '\nval = ' + val + '\ntext = ' + tex);

        }

    </script>

</body>

</html>

这种方法就相对比较简单，也不需要设置value值了。

然后再说下如何实现自定义select样式，实现这个样式我认为需要实现4点功能：

1.select的效果，就是点击右边按钮打开下拉框，点击下拉框内容或右边按钮或页面其他位置会收回下拉框；

2.模拟select里的select属性不要用到value值的，这里可以考虑用 li 标签的index属性来代替；

3.模拟select选中某项时会记录该项value值，可以结合第二点把value值放在变量里；

4.模拟form表单里提交时会把select当前选中的option标签的value值传送给后台，还有复位的功能。

关于JS获取select值的两种实现方法的更多相关文章

  1. JavaWeb后台从input表单获取文本值的两种方式

    JavaWeb后台从input表单获取文本值的两种方式 #### index.html <!DOCTYPE html> <html lang="en"> & ...

  2. js获取url参数值的两种方式

    js获取url参数值的方法有很多,下面也为大家介绍两种.  方法一:正则分析法  function getQueryString(name) {  var reg = new RegExp(" ...

  3. drupal7 覆写node-type.tpl.php获取字段值的两种方式

    字段的机读名称为:field_publication_date <!-- 下面两种方式都可以获取node字段的值--> 出版时间: <?php print date('Y-m-d', ...

  4. js获取url参数的两种方法

    js获取参数,在以前我都是用正在去拆分,然后获取,这种方式感觉是最简单的 方式1: function QueryString(item) { var sValue=location.search.ma ...

  5. Selenium获取input值的两种方法：WebElement.getAttribute("value")和WebElement.getText()

    在页面元素的定位中,有时候需要获取到元素的页面显示值,用来作为断言.例如,我需要获取email的值"amy1111@xxx.com". <input class=" ...

  6. js获取对象属性的两种方法，object.属性名，[‘属性名’ ]

    1.通过点的方式 2.通过括号的方式 例: <input type="text" value="hello" id="text"/&g ...

  7. [jQ/PHP]使用JS数组储值的两种情况（提交PHP处理）

    ---------------------------------------------------------------------------------------------------- ...

  8. npm获取配置值的两种方式

    命令行标记 在命令行上放置--foo bar设置foo配置参数为bar. 一个 -- 参数(argument)告诉cli解析器停止读取flags.一个 在命令行结尾的--flag参数(paramete ...

  9. js对象取值的两种方式

    :"李四"}; var v1 = obj.name1; //张三, 使用点的方式 //报错,不能使用点的方式 ]; //李四,使用中括号的方式 var key = "na ...

随机推荐

  1. Windows程序控件升级==>>构建布局良好的Windows程序

    01.菜单栏(MenuStrip) 01.看看这就是menuStrip的魅力: 02.除了一些常用的属性(name.text..)外还有: 03.有人会问:上图的快捷键: 方法: 方式一:1.设置菜单 ...

  2. 【iOS】Quartz2D图片剪切

    一.使用Quartz2D完成图片剪切1.把图片显示在自定义的view中 先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: - (void)drawRect:(CGRect)rec ...

  3. 优雅输出Javascript从Chrome浏览器

            一般前端Web开发好的App中js脚本文件,为了节约流量,都会做最小化,甚至合并压缩处理.但在对于需要Debug已处理过Javascript文件就不太方便了,可读性太差了. 使用Goo ...

  4. PowerShell与CMD在路径解析上的一点不同

    对于路径含有空格的文件夹,在加入PATH环境变量时,前后往往会加上引号.这种情况,CMD可以正确识别:但是Powershell却不能加上引号,否则无法定位路径. 例如,在PS中,$env:path查看 ...

  5. linux实现rdp访问

    远程访问linux系统,我们常用的有终端ssh.图形界面VNC,但是VNC安全性不够,并且不够流畅.相比之下,我认为rdp更好,并且还能利用windows的远程桌面访问,非常方便. 1. 安装xRDP ...

  6. Xml序列化、反序列化帮助类

    之前从网络上找了一个Xml处理帮助类,并整理了一下,这个帮助类针对Object类型进行序列化和反序列化,而不需要提前定义Xml的结构,把它放在这儿供以后使用 /// <summary> / ...

  7. HTML5中的音视频处理

    * 音视频处理 * 视频处理 * 基本内容 * 使用Flash技术处理HTML页面中的视频内容 * 包含音频.动画.网页游戏等 * 特点 * 浏览器原生不支持(IE浏览器要求安装ActiveX组件) ...

  8. XML的介绍

    XML是指可扩展标记语言(eXtensible Markup Language),它是一种标记语言,类似于HTML.它被设计的宗旨是传输数据,而非显示数据.   XML标签没有被预定义,需要开发者自定 ...

  9. 消除 activity 启动时白屏、黑屏问题

    默认情况下 activity 启动的时候先把屏幕刷成白色,再绘制界面,绘制界面或多或少有点延迟,这段时间中你看到的就是白屏,显然影响用户体验,怎么消除呢? 在 Activity theme 设置sty ...

  10. Android 开发前的基本的配置及第一个Android 程序

     一.JDK 1. 网上下载JDK 2.   配置环境变量(网上百度相关资料)       JAVA_HOME=D:\Java\jdk1.8.0_91       CLASSPATH=.;%JAVA_ ...