前几天发了一篇关于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. ASP.NET WebAPI 12 Action的执行

    Action的激活大概可以分为如下两个步骤:Action对应方法的调用,执行结果的协商.在WebAPI中由HttpActionInvoker(System.Web.Http.Controllers)进 ...

  2. [下载] MultiBeast 6.2.1版，支持10.9 Mavericks。Mac上的驱动精灵，最简单安装驱动的方式。

    下载地址1:http://pan.baidu.com/s/1i3ier9F 下载地址2:http://www.tonymacx86.com/downloads.php?do=cat&id=3 ...

  3. 高效构建Web应用 教你玩转Play框架 http://www.anool.net/?p=577

    Play 框架是一个完整的Web应用开发框架,覆盖了Web应用开发的各个方面.Play 框架在设计的时候借鉴了流行的 Ruby on Rails 和 Grails 等框架,又有自己独有的优势.使用 P ...

  4. php对mysql数据库简单连接操作

    前些阵子忙完了公司前端静态页面的事情了之后,简单学习了下php的基础知识,今天想了想回顾一下php连接数据库的方式,写一下随笔存一下看看 php连接数据库端口和新建数据库 <?php $serv ...

  5. 初学Node（三）模块系统

    模块系统 Node根据CommonJS规范实现了一套自己的模块机制,可以使用require()导入一个模块,使用module.exports导出一个模块. require使用 在Node中我们可以使用 ...

  6. javascript-this,call,apply,bind简述2

    上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...

  7. lazyload.js详解

    简介 lazyload.js用于长页面图片的延迟加载,视口外的图片会在窗口滚动到它的位置时再进行加载,这是与预加载相反的. 优点: 它可以提高页面加载速度: 在某些情况清晰它也可以帮助减少服务器负载. ...

  8. SQL注入技术专题—由浅入深【精华聚合贴】

    SQL注入技术专题—由浅入深[精华聚合贴] 不管用什么语言编写的Web应用,它们都用一个共同点,具有交互性并且多数是数据库驱动.在网络中,数据库驱动的Web应用随处可见,由此而存在的SQL注入是影响企 ...

  9. ArcGis在Oracle中常用的sql

    ) m 查询坐标数据 更新坐标: update tableName set SHAPE = mdsys.sdo_geometry(2002,28420,null,mdsys.sdo_elem_info ...

  10. Docker: 解决Centos 7中Permission Denied的问题

    当用docker -v挂载volume后,会出现Permission Denied的问题,这有时是因为SeLinux导致的.解决方法如下: chcon -Rt svirt_sandbox_file_t ...