前几天发了一篇关于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. 关于SQL2008 “不允许保存更改。您所做的更改要求删除并重新创建以下表。您对无法重新创建的标进行了更改或者启用了‘阻止保存要求重新创建表的更改’” 解决方案

    不允许保存更改.您所做的更改要求删除并重新创建以下表.您对无法重新创建的标进行了更改或者启用了“阻止保存要求重新创建表的更改” 解决方法:  打开SQL SERVER 2008 工具-->选项- ...

  2. css复习笔记

    margin: 1. 当有三个值时第一个值为上,第二个值为左右,第三个值为下. 2.margin外边距折叠,水平没有,垂直会折叠,且折叠后以两者最大值为准.另外,当一个元素包裹另一元素时也会发生折叠. ...

  3. CRM Look Up 解决方案

    CRM 前瑞开发中关于lookup的开发工作肯定会遇到,例如选中一个客户或者联系人后自动把相关的信息映射到相关记录上,这样可以减少用户的输入工作.我们在CRM 的映射关系中可以配置相关字段的映射可以解 ...

  4. SharePoint 2010 文档管理系列

    前言,这是自己第一次写一个系列的文档,本来想使用SharePoint 2013版本,但是碍于SharePoint 2013对于硬件要求过高,自己的笔记本无法承受,所以退而求其次选择了在SharePoi ...

  5. Create a “% Complete” Progress Bar with JS Link in SharePoint 2013

    Create a “% Complete” Progress Bar with JS Link in SharePoint 2013 SharePoint 2013 has a lot new fea ...

  6. IOS SizeClasses 详解

    SizeClasses 详解 iOS 8在应用界面的可视化设计上添加了一个新的特性-Size Classes.对于任何设备来说,界面的宽度和高度都只分为三种描述:紧凑,任意和宽松.这样开发者便可以无视 ...

  7. 真机调试出现Could not find Developer Disk Image问题解决办法

    1.升级Xcode 2. 在使用Xcode进行真机调试的时候,有时根据真机的系统不同,会出现could not find developer disk image 错误,这是由于真机系统过高或者过低, ...

  8. MySQL学习基础 之 起航篇

    MySQL 学习来自慕课网<与MySQL的零距离接触> MySQL是一个开源的关系型数据库管理系统 MySQL分为社区版和企业版 MySQL登录和退出相关的命令 参数 描述 -D,--da ...

  9. 最近开始研究PMD(一款采用BSD协议发布的Java程序代码检查工具)

    PMD是一款采用BSD协议发布的Java程序代码检查工具.该工具可以做到检查Java代码中是否含有未使用的变量.是否含有空的抓取块.是否含有不必要的对象等.该软件功能强大,扫描效率高,是Java程序员 ...

  10. 内部类--毕向东Java基础教程学习笔记

    内部类的访问规则 1. 内部类可以直接访问外部类的成员,包括私有. 之所以可以直接访问外部类的成员,是因为内部类中持有外部类的引用,格式:外部类名.this 2.外部类要访问内部类,必须建立内部类对象 ...