自定義下拉列表















自定義下拉列表，也就是點(diǎn)擊一個(gè)選擇框的時(shí)候，下面會(huì)彈出相對(duì)應(yīng)的推薦的選項(xiàng)，再選擇一個(gè)之后，選項(xiàng)的內(nèi)容會(huì)填充到選擇框里面。選項(xiàng)框隨之消失。

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

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

css樣式這里就不說了，大家可以自己設(shè)計(jì)。

HTML結(jié)構(gòu)寫好之后，接下來就是通過JS代碼來實(shí)現(xiàn)我們所需要的功能了。首先，選項(xiàng)框我們需要將其隱藏，也就是設(shè)置其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元素添加一個(gè)事件監(jiān)聽。

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

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

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

然后再通過事件委托（以事件冒泡的特性設(shè)計(jì)的一種方法）將選項(xiàng)的值賦予選擇框。

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

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


 

 


歡迎關(guān)注微信公眾號(hào):猴哥說前端