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

打赏