建设网站找哪里,网站制作开发公司,线下实体店如何推广引流,德阳市建设厅官方网站前几天发了一篇关于javascript获取select值的方法#xff0c;后来发现有另一种实现方法#xff0c;所以就都发出来比较一下#xff1a; 方法一#xff1a;通过获取option标签的value值来确定#xff1a; !DOCTYPE html
html
headmeta charset…前几天发了一篇关于javascript获取select值的方法后来发现有另一种实现方法所以就都发出来比较一下 方法一通过获取option标签的value值来确定 !DOCTYPE html
html
headmeta charsetutf-8 /titleselect/title
/head
bodyform idform1 nameform1select ids1 names1 onChangeprintTest(); option selectedselected value0 选项一/optionoption value1选项二/optionoption value2选项三/option/selectinput typesubmit valuebutton//formscript typetext/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
headmeta charsetutf-8 /titleselect/title
/head
bodyform idform1 nameform1select ids1 names1 onChangeprintTest(); option selectedselected value1 选项一/optionoption value2选项二/optionoption value3选项三/option/selectinput typesubmit valuebutton//formscript typetext/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值传送给后台还有复位的功能。
