Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:44:38
original
1732 Les gens l'ont consulté

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>
Copier après la connexion

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

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal