javascript
关于JS获取select值的两种实现方法
前幾天發(fā)了一篇關(guān)于javascript獲取select值的方法，后來發(fā)現(xiàn)有另一種實(shí)現(xiàn)方法，所以就都發(fā)出來比較一下：
方法一：通過獲取option標(biāo)簽的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" >選項(xiàng)一</option><option value="1">選項(xiàng)二</option><option value="2">選項(xiàng)三</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>這個(gè)方法需要為每個(gè)option標(biāo)簽定義一個(gè)value，而且value的值應(yīng)為“0 1 2…”這樣排序。
方法二：用javascript原裝的selectIndex屬性實(shí)現(xiàn)：
<!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" >選項(xiàng)一</option><option value="2">選項(xiàng)二</option><option value="3">選項(xiàng)三</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>這種方法就相對比較簡單，也不需要設(shè)置value值了。
然后再說下如何實(shí)現(xiàn)自定義select樣式，實(shí)現(xiàn)這個(gè)樣式我認(rèn)為需要實(shí)現(xiàn)4點(diǎn)功能：
1.select的效果，就是點(diǎn)擊右邊按鈕打開下拉框，點(diǎn)擊下拉框內(nèi)容或右邊按鈕或頁面其他位置會收回下拉框；
2.模擬select里的select屬性不要用到value值的，這里可以考慮用 li 標(biāo)簽的index屬性來代替；
3.模擬select選中某項(xiàng)時(shí)會記錄該項(xiàng)value值，可以結(jié)合第二點(diǎn)把value值放在變量里；
4.模擬form表單里提交時(shí)會把select當(dāng)前選中的option標(biāo)簽的value值傳送給后臺，還有復(fù)位的功能。
總結(jié)
以上是生活随笔為你收集整理的关于JS获取select值的两种实现方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript原生对象常用方法总结
- 下一篇： [javascript｜基本概念｜Num