JS实现下拉菜单赋值到文本框的联动方法
本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法。分享给大家供大家参考。具体如下：
这里演示js下拉选择框与输入框联动，直接添加选中值到输入框中的效果。这种效果相信不少朋友见到过吧，省去用户输入的麻烦，这里使用JS直接将值赋予输入框，了解原理之后，可灵活运用，扩展出更多的特效来。
运行截图如下：
<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>下拉选择框与输入框联动，直接添加选中值到输入框中，这种效果相信不少朋友见到过吧，省去用户输入的麻烦，这里使用JS直接将值赋予输入框，了解原理之后，可灵活运用，扩展出更多的特效来。
<html>
<head>
<meta charset="UTF-8">
<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>选中多个 复选框 然后把选中的值传到文本框里
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多个复选</title>
<style type="text/css">input{ margin-right:3px}label{margin:0 5px}</style>
<script type="text/javascript">
window.onload = function(){
var obox = document.getElementById("box");
var cboList = obox.getElementsByTagName("input");
var oText = document.getElementById("tt");
document.getElementById("box").onclick = function(e){
var src = e?e.target:event.srcElement; if(src.tagName == "INPUT"){
var values = [];
for(var i=0;i<cboList.length;i++){
if(cboList[i].checked){
values.push(cboList[i].value);
}
} oText.value = values.join("|");
}
}
}
</script>
</head>
<body>
<p><input type="text" id="tt" /></p>
<div id="box">
<label><input type="checkbox" value="a" />[a]</label>
<label><input type="checkbox" value="b" />[b]</label>
<label><input type="checkbox" value="c" />[c]</label>
<label><input type="checkbox" value="d" />[d]</label>
<label><input type="checkbox" value="e" />[e]</label>
<label><input type="checkbox" value="f" />[f]</label></div>
<br />返回顶部
