doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>js模擬select下拉列表
title
>
<
style
>
body
emul
#box
.select
.arrow
.sub
.sub li
.sub li:hover ,.sub li.hover
style
>
head
>
<
body
>
<
h3>js模擬selec下拉列表
h3>
<
div
id="box"
>
<
form
action
="">
<
span
class
="select"
>請選擇下拉列表項
span
><
em class
="arrow"
>▼
em>
<
button
type
="submit"
>搜尋
button
>
form
>
<
ul class
="sub"
>
<
li>專案1
li>
<
li>專案2
li>
<
li>專案3
li>
<
li>專案4
li>
<
li>專案5
li>
<
li>專案6
li>
<
li>專案7
li>
<
li>專案8
li>
ul>
div>
<
script
>
window.onload
=function
()else
//阻止預設事件
oevent.cancelbubble
=true
; };
//點選文件任意空白處，隱藏下拉列表
document.onclick
=function
();
//迴圈遍歷所有li，為每個li新增相應事件
for(
vari =0
; i
<
ali.length; i
++);
//滑鼠移出，移出li的class
ali[i].onmouseout
=function
();
//點選li，將osel的內容替換成當前li的值
ali[i].onclick
=function
(); }
};script
>
body
>
html
>
運用到js的display顯示隱藏、阻止預設事件，新增刪除class，innerhtml等相關知識點。
**只實現了它的功能，美化方面，可根據專案實際需要，自行調整修改。
js控制select 下拉列表
通過js控制select下拉列表 通過js獲取select下拉列表的值class form control 1option events 利用以下函式，可以取到被選中的option的位 getselected function 或利用此函式可以獲取被選中的option的值 getselected f...
模擬select,隱藏下拉列表的幾種實現
平時開發過程中，出於各種原因模擬原生slect的要求並不算少見。在實現的過程中，點選其他區域隱藏下拉列表，又是乙個必備的功能，最近在一次開發的過程中引發了點思考，做下總結。實際中的實現比較複雜，列表中還要增刪改查等操作。這裡就只放個最簡單的demo。目的是點選select以外的其他區域，隱藏下拉列表...
jquery操作下拉列表select
jquery獲取select選擇的text和value 語法解釋 1.select id change function 為select新增事件，當選擇其中一項時觸發 2.var checktext select id find option selected text 獲取select選擇的tex...