Manchmal benötigen wir ein optionales Dropdown-Feld zur Auswahl von Inhalten, aber es besteht auch die Notwendigkeit, die Eingabe anzupassen. Für diese Anforderung verwenden die meisten Websites ein Dropdown-Feld und einen Eingabetext, um Auswahlmöglichkeiten parallel oder in separaten Zeilen bereitzustellen. Wir möchten also, dass es wie ein Dropdown-Feld aussieht, das eingegeben oder ausgewählt werden kann. Wie geht das?
Tatsächlich können wir diesen Effekt durch CSS-Positionspositionierung und ein wenig Javascript-Code simulieren.
<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-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
