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
<body>
<div id="box">Please choose the name of your mobile phone.</div>
<div id="down">
<ul class="phones">
<li>HUAWEI</li>
<li>millet</li>
<li>oppo</li>
<li>vivo</li>
<li>iPhone</li>
<li>Samsung</li>
</ul>
</div>
</body>
The < style > part --------------------------------------------------------------------------------------------------------------------------------
<style> #box{ 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; } #down{ border: 1px solid #c5c5c5; width: 90px; margin-left: 5px; display: none; } ul{ padding: 0; margin: 0; } li{ 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; } li:hover{ background-color: #5c0e0e; } </style>
The <script> section ----------------------------- the part of realizing the function
<script>
var obox = document.getElementById("box");
var odown = document.getElementById("down");
var oli = document.querySelectorAll("li");
console.log(oli);
var timer;
//When clicking obox When the content of the drop-down list is presented, a delay effect is given.
obox.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
odown.style.display = "block";
},300)
///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;
odown.style.display = "none";
clearInterval(timer);
}
}
}
</script>
The above is a simple drop-down list I wrote, which has some shortcomings and is expected to include.