Maison > Article > interface Web > Une zone de texte avec une fonction de liste déroulante implémentée dans les compétences javascript_javascript
Une zone de texte avec une fonction de liste déroulante implémentée dans les compétences javascript_javascript
- WBOYoriginal
- 2016-05-16 16:49:161493parcourir
Parfois, nous avons besoin d'une liste déroulante facultative pour sélectionner le contenu, mais il est également nécessaire de personnaliser la saisie. Pour cette exigence, la plupart des sites Web utilisent une zone déroulante et un texte de saisie pour proposer des choix en parallèle ou sur des lignes séparées. Nous voulons donc que cela ressemble à une liste déroulante qui peut être saisie ou sélectionnée, alors comment faire ?
En fait, nous pouvons simuler cet effet grâce au positionnement de position CSS et un peu de code javascript.
<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>
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript