前几天发了一篇关于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. K3Cloud开放数据模型

          金蝶K/3 Cloud是基于WEB2.0与云技术的一个开放式.社会化的新时代企业管理服务平台.整个产品采用SOA架构,完全基于BOS平台组建而成,业务架构上贯穿流程驱动与角色驱动思想,结合 ...

  2. mac下用ruby安装sass && webstorm下给scss文件添加watch

    1.安装rvm 先安装 [Xcode](http://developer.apple.com/xcode/) 开发工具,它将帮你安装好 Unix 环境需要的开发包 sudo curl -L https ...

  3. GridView1事件

    1 protected void GridView1_DataBinding(object sender, EventArgs e) { 该事件当服务器控件绑定数据时发生. }2 protected ...

  4. Microsoft Dynamics CRM 2013 --针对特定实体,取消保存功能(包含自动保存)

    AutoSave 是 Microsoft Dynamics CRM 2013 一个新特性. 但AutoSave的有效范围是[所有实体],不允许针对特定某一实体进行设置. 所以,若想针对特定实体进行设置 ...

  5. Python基础（8）--文件

    文件是我们储存信息的地方,我们经常要对文件进行读.写.删除等的操作,在Python中,我们可用Python提供的函数和方法方便地操作文件.文件可以通过调用open或file来打开,open通常比fil ...

  6. IOS 网络浅析－（七 JSON解析之三方JSONKit）

    在这个网络横行的时代......... 有没有小说的感觉,哈哈

  7. 【原】PSD图标素材的全自动切图方法，适用于IOS、安卓、web前端等领域

    屌丝个人开发者经常遇到的尴尬问题是,自己不会设计UI素材又请不起专业的美工.最好的方式是去网上下载符合自己需求的素材修修改改直接用上.但是,在这个过程中会发现很多下载下来的素材是PSD格式的,很多图标 ...

  8. iOS使用Workspace来管理多项目

    开发中会有一些常用的类或方法,或者是某个特定功能的,比如一个自定义的弹框.一个更容易使用的网络请求库,可以把它们放到一个单独的工程里,通过静态库(library.FrameWork)的方式应用到任何其 ...

  9. spring 管理 jdbc 事务

    @Transactional    业务实现类 类名上方--这个类中的方法,执行操作前会打开事务. 默认:RuntimeException 自动回滚, 可以try  catch 的异常,不会滚 方法名 ...

  10. animation of android （1）

    android把动画的模式分为:property animation,view animation,drawable animation. view animation:给出动画的起止状态,并且通过一 ...