recherche

Maison >interface Web >js tutoriel >Comment lier la zone de sélection déroulante js et la zone de saisie pour ajouter la valeur sélectionnée aux compétences input box_javascript

Comment lier la zone de sélection déroulante js et la zone de saisie pour ajouter la valeur sélectionnée aux compétences input box_javascript

WBOY
WBOYoriginal
2016-05-16 15:44:411741parcourir

L'exemple de cet article décrit la méthode de liaison de la zone de sélection déroulante js et de la zone de saisie pour ajouter la valeur sélectionnée à la zone de saisie. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration du lien entre la zone de sélection déroulante js et la zone de saisie, et l'effet de l'ajout direct de la valeur sélectionnée à la zone de saisie. Je pense que de nombreux amis ont vu cet effet. Cela évite à l'utilisateur les problèmes de saisie. Ici, JS est utilisé pour attribuer directement la valeur à la zone de saisie, après avoir compris le principe, il peut être utilisé de manière flexible pour étendre davantage d'effets spéciaux.

La capture d'écran en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

http://demo.jb51.net/js/2015/js-select-value-to-input-codes/

Le code spécifique est le suivant : 

<html>
<head>
<title>下拉选择框与输入框联动，直接添加选中值到输入框</title>
</head>
<body>
<select id="uiSel">
  <option value="-1">请选择</option>
  <option value="until1">unti1</option>
  <option value="until2">unti2</option>
  <option value="until3">unti3</option>
  <option value="until4">unti4</option>
  <option value="until5">unti5</option>
</select>
<input type="text" name="" id="show" />
</body>
<script type="text/javascript">
document.getElementById('uiSel').onchange=function (){
  if(this.options[0].value==-1)this.options[0]=null;
  document.getElementById('show').value=this.value
};
</script>
</html>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Déclaration：
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
Article précédent：Implémentation JS des compétences de partage de code temporel de compte à rebours réglable_javascriptArticle suivant：Implémentation JS des compétences de partage de code temporel de compte à rebours réglable_javascript

Articles Liés

Voir plus