Using js to realize the drop-down list of menus is practical and simple

The drop-down list could have been written in conjunction with <select> and <option> for convenience. But in the front end, all the useful things are compatible. To avoid compatibility problems, it is not appropriate to write the drop-down list in js.


<body> Part --------- Simple layout

    <div id="box">Please choose the name of your mobile phone.</div>
    <div id="down">
        <ul class="phones">



The < style > part --------------------------------------------------------------------------------------------------------------------------------

            color: aliceblue;
            width: 110px;
            height: 25px;
            border: 1px solid #c5c5c5;
            border-radius: 10px;
            background-color: #797777;
            text-align: center;
            /* text-indent: 5px; */
            font-size: 14px;
            line-height: 25px;
            cursor: pointer;
            border: 1px solid #c5c5c5;
            width: 90px;
            margin-left: 5px;
            display: none;
            padding: 0;
            margin: 0;
            list-style: none;
            font-size: 14px;
            border-bottom: 1px dashed #c5c5c5;
            text-align: center;
            height: 25px;
            line-height: 25px;
            color: aliceblue;
            background-color: #333;
            cursor: pointer;
            background-color: #5c0e0e;



The <script> section ----------------------------- the part of realizing the function

        var obox = document.getElementById("box");
        var odown = document.getElementById("down");
        var oli = document.querySelectorAll("li");
        var timer;
        //When clicking obox When the content of the drop-down list is presented, a delay effect is given.
        obox.onclick = function(){
            timer = setInterval(function(){
       = "block";
            ///Select an item in the list and present it in the box in,Hide drop-down lists
            for(var i=0;i<oli.length;i++){
                oli[i].n = i;
                oli[i].onclick = function(){
                    obox.innerHTML = this.innerHTML;
           = "none";

The above is a simple drop-down list I wrote, which has some shortcomings and is expected to include.

Keywords: Javascript Mobile

Added by collette on Sat, 05 Oct 2019 07:58:35 +0300