自定義下拉列表















自定義下拉列表，也就是點擊一個選擇框的時候，下面會彈出相對應的推薦的選項，再選擇一個之后，選項的內(nèi)容會填充到選擇框里面。選項框隨之消失。

首先我們先定義兩個框，一個選擇框，一個選項框，代碼結(jié)構(gòu)如下：

    <div id="info">
            選擇一個你最喜歡的游戲
        </div>
        <ul id="chose">
            <li>王者榮耀</li>
            <li>LOL</li>
            <li>吃雞</li>
            <li>連連看</li>
            <li>冒險島</li>
            <li>穿越火線</li>
            <li>地下城與勇士</li>
            <li>夢幻西游</li>
        </ul>

css樣式這里就不說了，大家可以自己設計。

HTML結(jié)構(gòu)寫好之后，接下來就是通過JS代碼來實現(xiàn)我們所需要的功能了。首先，選項框我們需要將其隱藏，也就是設置其display屬性為none。

     $("#info").addEventListener("click",function(e){
                e = e || event;
                e.stopPropagation();
                $("#chose").style.display = "block";
            });
     
            $("#chose").addEventListener("click",function(e){
                e = e || event;
                var src = e.target || e.srcElement;
                $("#info").innerHTML = src.innerHTML;
                $("#info").style.color = "black";
                $("#chose").style.display = "none";
            });
     
            document.onclick = function(){
                $("#chose").style.display = "none";
            };

注：通過element.addEventListener(type, callback[, useCapture])給特定的dom元素添加一個事件監(jiān)聽。

    其中type是事件的類型，如click，dblclick，mouseover等，也就是事件句柄去掉前面的on。

     e = e || event;
     e.stopPropagation();

上面的兩句代碼是用來阻止事件冒泡的。

然后再通過事件委托（以事件冒泡的特性設計的一種方法）將選項的值賦予選擇框。

注：element.target是獲取最初觸發(fā)事件的事件源元素，這里點擊選擇的時候，最初觸發(fā)的事件源，很明顯就是一個一個的li元素。然后將其內(nèi)容賦予選擇框就可以了。

最后選擇結(jié)束之后，再將下面的提示框隱藏掉就可以了。


 

 


歡迎關注微信公眾號:猴哥說前端