前几天发了一篇关于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值传送给后台，还有复位的功能。
时间： 2024-11-05 00:42:02