js自定義select下拉選單效果
分享一段程式碼例項,它實現了自定義select下拉選單的功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; } #btn { text-decoration: none; color: gray; } #ul1 { list-style: none; border: 1px solid gray; width: 150px; border-radius: 5px; position: absolute; left: 35px; top: 5px; background-color: white; display: none; } #ul1 li { padding: 5px 0; padding-left: 15px; } #ul1 li:hover { background-color: red; } </style> <script type="text/javascript"> window.onload = function () { var btn = document.getElementById("btn"); var ul1 = document.getElementById("ul1"); var lis = ul1.getElementsByTagName('li'); btn.onclick = function () { ul1.style.display = "block"; } ul1.onmouseleave = function () { ul1.style.display = "none"; } var texts = ['預設版本', '網易6.0', '網易6.0簡約版']; for (var index = 0; index < lis.length; index++) { lis[index].index = index; lis[index].onclick = function () { ul1.style.display = "none"; for (var j = 0; j < lis.length; j++) { lis[j].innerHTML = texts[j]; } btn.innerHTML = this.innerHTML; this.innerHTML = '√' + this.innerHTML; } } } </script> </head> <body> 版本:<a href="###" id="btn">預設版本</a> <ul id="ul1"> <li>√ 預設版本</li> <li>網易6.0</li> <li>網易6.0簡約版</li> </ul> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).getElementsByTagName()可以參閱document.getElementsByTagName()一章節。
(2).innerHTML屬性可以參閱innerHTML一章節。
相關文章
- jQuery select下拉選單復位效果jQuery
- select下拉選單跳轉效果程式碼
- 自定義下拉選單控制元件控制元件
- Vue.js自定義下拉選單,如何實現在下拉選單區域外點選即可關閉下拉選單的功能Vue.js
- 選中select下拉選單option項實現提交效果
- select下拉選單級聯效果例項程式碼
- select下拉選單實現分類級聯效果
- javascript模擬美化select下拉選單效果詳解JavaScript
- HTML select下拉選單HTML
- HTML select 下拉選單HTML
- select下拉選單項互換效果程式碼例項
- jQuery 美化select下拉選單jQuery
- 圓角select下拉選單
- select下拉選單 change事件事件
- js獲取select下拉選單的所有option項JS
- select下拉選單多級級聯效果程式碼例項
- Flutter 自定義功能強大的下拉篩選選單 packageFlutterPackage
- 選中select下拉選單項提交表單
- 【Android初級】如何實現一個有動畫效果的自定義下拉選單Android動畫
- 可以輸入select下拉選單
- jquery如何操作select下拉選單jQuery
- 下拉選單框select常用點
- js如何獲取select下拉選單的預設選中項JS
- js獲取當前select下拉選單選中項的值JS
- js如何動態為select下拉選單新增option項JS
- js如何刪除select下拉選單的所有專案JS
- js獲取select下拉選單的value和文字值JS
- js select下拉選單的defaultSelected屬性簡單介紹JS
- android短視訊開發,自定義下拉選單Android
- js如何互換兩個select下拉選單的option項JS
- js獲取select下拉選單中option項的數目JS
- js模擬實現select下拉選單程式碼例項JS
- JS列表的下拉選單元件(仿美化控制元件select)JS控制元件
- 模擬select下拉選單詳解
- JavaScript動態操作select下拉選單JavaScript
- select下拉選單二級聯動
- select下拉選單新增不重複項
- jQuery操作select下拉選單程式碼jQuery