实现两个文本框之间的传值

首先要了解 HTML DOM 访问修改
HTML DOM 访问
访问 HTML 元素（节点）
访问 HTML 元素等同于访问节点
可以以不同的方式来访问 HTML 元素：

通过使用 getElementById() 方法返回带有指定 ID 的元素
ps：通过id查找永远只返回找到的第一个，所以要保证页面中id属性值的唯一性
通过使用 getElementsByTagName() 方法返回带有指定标签名的所有元素
通过使用getElementsByClassName() 方法查找带有相同类名的所有 HTML 元素
注意： getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。
通过使用getElementsByName()方法按name属性查找

例

//获取 id="intro" 的元素
document.getElementById("intro");
//返回包含文档中所有 <p> 元素的列表
document.getElementsByTagName("p");
//返回包含文档中所有 <p> 元素的列表，并且这些 <p> 元素应该是 id="main" 的元素的后代（子、孙等等）集合 只有一个元素，也是放在集合中  
document.getElementById("main").getElementsByTagName("p");
//获取 name="pwd" 的元素  动态数组
var pwd = document.getElementsByName("pwd"); 
console.log(pwd[0].value);//获得单标签的值
//返回包含 class="intro" 的所有元素的一个列表 返回一个集合
document.getElementsByClassName("intro");

HTML DOM 修改 – 内容
改变元素内容的最简单的方法是使用 innerHTML 属性。
innerHTML 所有的html内容
innerText(textContent) 只有文本信息
例

<html>
<body>
//改变一个 <p> 元素的 HTML 内容
<p id="p1">Hello World!</p>
<script>
	document.getElementById("p1").innerHTML="New text!";
</script>
//改变一个段落的 HTML 样式
<p id="p2">Hello world!</p>
<script>
	document.getElementById("p2").style.color="blue";
</script>
</body>
</html>

两个文本框之间的传值小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        select{
            width: 120px;
            height: auto;
            float: left;
            margin: 10px;
            text-align: center;
        }
        ul{
            float: left;
        }
        li{
            list-style: none;
            line-height: 20px;
            font-size: 20px;
            color:rgb(150, 51, 189);
            margin: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <select size="8" multiple = "multiple" id ="left">
        <option>China</option>
        <option>England</option>
        <option>France</option>
        <option>America</option>
        <option>Canada</option>
        <option>Japan</option>
        <option>Australia</option>
        <option>Germany</option>
    </select>
    <ul>
        <li>&gt;</li>
        <li>&lt;</li>
        <li>&lt;&lt;</li>
        <li>&gt;&gt;</li>
    </ul>
    <select size="8" multiple = "multiple" id="right"></select>

        <script>
            //获取li
            var oli = document.getElementsByTagName("li");
			
			//当前点击事件
            for(var i = 0 , len = oli.length; i < len; i++){
                    oli[i].onclick = chag;
                }
				
			//获取左边下拉框
			var left = document.getElementById("left");
			//获取右边下拉框
			var right = document.getElementById("right");
			//把下拉框的值放入数组
			var country = left.innerHTML.replace(/^\s*<option>|<\/option>\s*$/g,"").split(/<\/option>\s*<option>/);
			//新数组
			var selct = [];
			
			//点击时执行的事方法
            function chag(){
                switch (this.innerHTML) {
                    //全部右移
                    case "&gt;&gt;":
                        //将country数组拼接到selct数组结尾
                        selct = selct.concat(country);
                        //清空数组country
                        country = [];
                        break;
                    //全部左移
                    case "&lt;&lt;":
                        //将selct数组拼接到country数组结尾
                        country = country.concat(selct);
                        //清空数组selct
                        selct = [];
                        break;
                    //选中左移
                    case "&gt;":
                       // 获取到被选中的option  获取到unsel元素下所有option  存储在options
                        var options = left.getElementsByTagName("option");
                        // 循环遍历options中每一个 option
                        for(var i = options.length-1; i >= 0; i--){
                            if(options[i].selected){
                                    selct.push(country.splice(i,1)[0]);
                                }
                        }
                        //排序
                        selct.sort();
                        break;
                    //选中右移
                    case "&lt;":
                        // 获取到被选中的option  获取到unsel元素下所有option  存储在options
                        var options = right.getElementsByTagName("option");
                        // 循环遍历options中每一个 option
                        for(var i = options.length-1; i >= 0; i--){
                            if(options[i].selected){
                                country.push(selct.splice(i,1)[0]);
                                }
                        }
                        //排序
                        country.sort();
                        break;
                }
                //右边下拉框赋值
                updateView(selct,right);
                //左边下拉框赋值
                updateView(country,left);
            }
			//将数组更新到sel元素上
            function updateView(arr, sel){
                sel.innerHTML = arr.length != 0 ? "<option>" + arr.join("</option><option>") + "</option>" : "";
            }
        </script>
</body>
</html>

效果：
在这里插入图片描述
点击>获取左边选中的值传到右边并排序

点击<获取右边选中的值传到左边并排序

单选和多选都可以
点击>>全部右移点击<<反之

来源：CSDN

作者：weixin_45846263

链接：https://blog.csdn.net/weixin_45846263/article/details/103809008

标签

pwd

实现两个文本框之间的传值 demo

实现两个文本框之间的传值

两个文本框之间的传值小demo