简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

Une zone de texte avec une fonction de liste déroulante implémentée dans les compétences javascript_javascript

WBOY
Libérer： 2016-05-16 16:49:16
original
1446 Les gens l'ont consulté

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.

Copier le code Le code est le suivant :




 可编辑可选择的下拉框
 
 


 

    
    
 

 <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>


Étiquettes associées：
javascript 下拉框 文本框
source：php.cn
Article précédent：Introduction détaillée au cadre de tests unitaires Javascript Compétences QUnitjs_javascript Article suivant：Explication détaillée de JavaScript et des machines à états finis_Connaissances de base
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Diffusez des données depuis l'API d'OpenAI à l'aide d'AJAX, PHP et d'événements envoyés par le serveur. Comment puis-je utiliser les événements envoyés par le serveur (SSE) pour diffuser des don...
Depuis 2023-11-11 12:03:23
0
1
497
Uncaught TypeError : impossible de définir la propriété non définie (définir 'innerHTML') J'essaie de créer une page Web en utilisant php, sur un élément de classe "Continuous...
Depuis 2023-11-08 21:06:09
0
1
278
Comment obtenir la valeur RVB de la couleur nommée CSS/HTML en JavaScript J'ai créé un objet Javascript appelé [name-rgb]. Votre base : nomméeColors={AliceBlue:[240...
Depuis 2023-11-06 09:05:50
0
2
210
Pourquoi tant de scripts JavaScript ajoutent-ils des nombres aléatoires aux éléments ? collision? J'ai récemment appris JavaScript et j'ai vu de nombreux exemples d'utilisation de Math.ran...
Depuis 2023-11-04 20:00:04
0
2
296
Identifier les limitations de performances en JavaScript J'essaie de trouver le goulot d'étranglement dans mon Javascript. Fondamentalement, je dév...
Depuis 2023-10-31 20:47:17
0
1
229
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！