recherche

Maison >interface Web >js tutoriel >Méthode JS pour implémenter l'affectation du menu déroulant aux compétences text box_javascript

Méthode JS pour implémenter l'affectation du menu déroulant aux compétences text box_javascript

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

L'exemple de cet article décrit la méthode d'attribution de valeurs​​à la zone de texte à partir du menu déroulant à l'aide de JS. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Voici une démonstration de la colonne d'introduction construite par le menu déroulant et la zone de texte. La valeur dans la zone de sélection est positionnée dans la zone de saisie de texte INPUT. Il s'agit d'un exemple d'attribution de la valeur de la liste déroulante. box à la zone de texte. Cela semble être une fonction courante lorsque l'on surfe sur Internet, mais je ne sais pas comment la décrire, cela pourrait être appelé lien.

L'effet de l'opération est comme indiqué ci-dessous :

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

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

Le code spécifique est le suivant : 

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin  
var messages = new Array(); 
messages[0] = ""; //这里写入每个选项对应的说明文字
messages[1] = "http://www.jb51.net";
messages[2] = "http://www.163.com";  
messages[3] = "http://cn.yahoo.com";
//根据需要，这里应该随着选项的改变而增减项目
function messageReveal() { 
var messageindex = document.messageForm.messagePick.selectedIndex;
//取得当前下拉菜单选定项目的序号
helpmsg = messages[messageindex];
//根据序号取得当前选项的说明
document.messageForm.messageField.value = helpmsg
//将说明写进文框
}
// End -->
</SCRIPT>
<title>下拉菜单和文本框构建的介绍栏</title>
</head>
<body>
<form name="messageForm">
<select name="messagePick" OnChange="messageReveal()">
<option value="0">请在这里选择需要咨询的信息
<option>脚本之家
<option>网易163
<option>中文雅虎
</select>
<br><br><br><br><br>
<input name="messageField" type="text" style="overflow:auto" />
</form>
</body>
</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：Javascript implémente les compétences de téléchargement d'images front page_javascriptArticle suivant：Javascript implémente les compétences de téléchargement d'images front page_javascript

Articles Liés

Voir plus