當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
关于JS获取select值的两种实现方法
生活随笔
收集整理的這篇文章主要介紹了
关于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值的两种实现方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript原生对象常用方法总结
- 下一篇： [javascript｜基本概念｜Num