search

Home >Web Front-end >JS Tutorial >JS method to implement drop-down menu assignment to text box_javascript skills

JS method to implement drop-down menu assignment to text box_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:44:381759browse

The example in this article describes the method of assigning values ​​​​to the text box from the drop-down menu using JS. Share it with everyone for your reference. The details are as follows:

Here is a demonstration of the introductory column constructed by the drop-down menu and text box. The value in the Select box is positioned in the INPUT text input box. This is an example of assigning the value of the drop-down box to the text box. It seems to be a common function when surfing the Internet, but I don’t know how. To describe it, it might be called linkage.

The operation effect is as shown below:

The online demo address is as follows:

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

The specific code is as follows: 

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

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Javascript implements image upload front page_javascript skillsNext article：Javascript implements image upload front page_javascript skills

Related articles

See more