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