前几天发了一篇关于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. PHP学习笔记：删除与销毁session

    删除某个session值可以使用PHP的unset函数,删除后就会从全局变量$_SESSION中去除,无法访问. session_start(); $_SESSION['name'] = 'jobs' ...

  2. ahjesus sql手动重新更新ID

    declare cus_cursor cursor scroll for SELECT Id from [dbo].[TLotterySpiderRule] open cus_cursor decla ...

  3. [翻译]:SQL死锁-锁与事务级别

    其实这一篇呢与解决我项目中遇到的问题也是必不可少的.上一篇讲到了各种锁之间的兼容性,里面有一项就是共享锁会引起死锁,如何避免呢,将我们的查询都设置中read uncommitted是否可行呢?其结果显 ...

  4. JavaScript String（字符串）对象 实例

    返回字符串的长度: <html> <body> <script type="text/javascript"> var txt="He ...

  5. CRM 2013 系统设置新功能一：界面自动保存 及 SDK 中 Xrm.Page.data.entity.save

    CRM 2013 界面会自动保存了..在系统设置中默认“是”,如果不需要可以调整. CRM实体记录在新建时会有出现“保存”按钮,非新建状态下,没有“保存”按钮只有“新建”按钮,系统将会自动为你保存最后 ...

  6. CSS重置样式表

    网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...

  7. vi编辑器常用配置

    在终端下使用vim进行编辑时,默认情况下,编辑的界面上是没有显示行号.语法高亮度显示.智能缩进等功能的.为了更好的在vim下进行工作,需要手动设置一个配置文件:.vimrc. 在启动vim时,当前用户 ...

  8. Swift开发第一篇——异常处理及断言

    本篇分两部分: 1.错误和异常处理 2.Swift 中的断言 1.错误和异常处理 在 OC 开发中,我们通常会将 error 置为 nil NSError *error; BOOL success = ...

  9. SharePoint 指定配置数据库访问账户“域账户\用户”

    大家在安装sharepoint时都会遇到这个问题,域账户,什么是域账户哪?域账户简单理解就是网路账户,与本地账户不同,什么是域哪?域就是控制器. 一台Windows 计算机,它要么隶属于工作组,要么隶 ...

  10. Redis-stat的安装与使用

    redis-stat是一个用ruby写成的监控redis的程序,基于info命令获取信息,而不是通过monitor获取信息 一.安装ruby yum install -y ruby ruby-deve ...