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

来源：互联网发布：知乎我是歌手林俊杰编辑：程序博客网时间：2024/06/09 17:46

前几天发了一篇关于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值传送给后台，还有复位的功能。

先写到这，未完待续！