Sometimes we need an optional drop-down box to select content, but there is also a need to customize the input. For this requirement, most websites use a drop-down box and an input text to provide choices in parallel or in separate rows. So, we want it to look like a drop-down box that can be entered or selected, so how to do it?
In fact, we can simulate this effect through css position positioning and a little javascript code.
<script><br> var listName = document.getElementById('list-name-for-select');<br> var listSelect = document.getElementById('list-select').onchange = function(e){<br> console.log(this)<br> if(this.value){<br> listName.value = this.value ' | ' this.options[this.selectedIndex].text;<br> }else{<br> listName.value = ''<br> }<br> };<br> </script>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
