前几天发了一篇关于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/js获取客户端mac地址的实现代码

    这篇文章主要介绍了如何在php与js中分别获取客户度mac地址的方法,需要的朋友可以参考下   废话不多讲,直接上代码吧! 复制代码 代码如下: <?php   class MacAddr {  ...

  2. 9 DelayQueueEntry 延时队列节点类——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/oloroso ...

  3. PHP脚本redis类的实例源码

    class redisDB{         private $redis; //redis对象             /**      * 初始化Redis      * $config = ar ...

  4. [转载]C#中各种计时器

    1.使用 Stopwatch 类 (System.Diagnostics.Stopwatch) Stopwatch 实例可以测量一个时间间隔的运行时间,也可以测量多个时间间隔的总运行时间.在典型的 S ...

  5. zzuli oj 1165 实数的小数部分(指针专题)

    Description 读入一个实数,输出该实数的小数部分,小数部分若多余的末尾0,请去掉.如输入111111.12345678912345678900  则输出0.12345678912345678 ...

  6. 使用activeMQ实现jms

    一:jms介绍         jms说白了就是java message service,是J2EE规范的一部分,跟jdbc差不多,sun只提供了接口,由各个厂商(provider)来进行具体的实现, ...

  7. 利用HTML5新特性改变浏览器地址后不刷新页面

    原文:http://www.cnblogs.com/xuchengzone/archive/2013/04/18/html5-history-pushstate.html   作为一个程序员,上Git ...

  8. pytest进阶之fixture

    前言 学pytest就不得不说fixture,fixture是pytest的精髓所在,就像unittest中的setup和teardown一样,如果不学fixture那么使用pytest和使用unit ...

  9. codeforces#983 B. XOR-pyramid (dp)

    参考博客:https://www.01hai.com/note/av137952. 题意:首先定义 (b代表一个数组) 给出一个区间,l,r,求它最大的连续子序列的函数值 分析: 定义dp[x][y] ...

  10. dp 洛谷P1977 出租车拼车 线性dp

    题目背景 话说小 x 有一次去参加比赛,虽然学校离比赛地点不太远,但小 x 还是想坐 出租车去.大学城的出租车总是比较另类,有“拼车”一说,也就是说,你一个人 坐车去,还是一堆人一起,总共需要支付的钱 ...