关于JS获取select值的两种实现方法

前几天发了一篇关于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值的两种实现方法相关推荐

js获取每个月最后一天的两种方法
每次遇到不太熟悉的东西,就会莫名的心虚,如果再有需求确实需要,还会有反抗情绪,就比如说昨天的一个需求. 需求细节报表数据项加链接,需要把起止时间携带到链接地址上,方便在对应地址的页面回显数据.不过报 ...
js对象取值的两种方式及区别
var obj = {abc:"ss",nn:90}; var v1 = obj.abc;//使用点的方式 var v2 = obj["abc"];//使用中括 ...
html 获取title值,分享两种获取WEB标题title的方法
如何获取HTML页面的标题?下面本篇文章就来给大家介绍一下使用javascript获取HTML文档标题的方法,希望对大家有所帮助. 方法一:使用title属性 title 属性可返回当前文档的标题( ...
js获取classname值_利用js获取元素class值的两种方法
我们有时为了达到某种效果,需要以元素的class值为条件做判断. 我们如何利用JavaScript获取元素class的值?我们先看下面代码: x=document.getElementsByTagNa ...
小程序获取用户信息的两种方法
小程序获取用户信息的两种方法第一种使用 getUserProfile 代码示例第二种使用头像昵称填写相信大家之前也经常使用open-data获取用户的头像和昵称吧,但微信的这个改编意味着我们要 ...
js循环添加事件的两种方法
js循环添加事件的两种方法选择下拉列表中的一个li将文本传到框中问题:写此二级菜单时用到的方法不好,对此进行优化原始js代码: <script>// 思路:1.点击下拉框a时,ul中 ...
html中获取modelandview中的json数据_从Bitmap中获取YUV数据的两种方式
从Bitmap中我们能获取到的是RGB颜色分量,当需要获取YUV数据的时候,则需要先提取R,G,B分量的值,然后将RGB转化为YUV(根据具体的YUV的排列格式做相应的Y,U,V分量的排列) 所以这篇 ...
JS区分中英文字符的两种方法
JS区分中英文字符的两种方法: 正则和charCodeAt()方法. 正则无疑是最强大的判断各种条件的方法, 最近也在研习它, 虽然枯燥, 但仍有乐趣. 用它来判断一个双字节的中文字符也是轻而易举地. ...
获取html下拉菜单selected,原生js获取select下拉框的selected的option项
一. 使用原生js,获取select标签下属性有selected的option项. 先写一个select标签如下: TEXT-aaaaa TEXT-bbbbb 原生js获取select标签这个对象 ...

关于JS获取select值的两种实现方法

关于JS获取select值的两种实现方法相关推荐

最新文章

热门文章