-
结果展示：
1.1 默认值（此时是input的默认值）
1.2 选择后（此时input内显示的是多选框选中的值）
-
代码展示 （代码内的所有的$可以换成jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
function test_onclick(obj, type){
var arr={'up':'#up_inerface', 'down':'#down_interface'};
console.log(obj);
console.log(jQuery(obj));
console.log(jQuery(obj).val()); //获取点击的值
console.log(arr[type]); //#up_inerface
console.log(jQuery(arr[type])); //相当于jQuery("#up_inerface")
console.log(jQuery(arr[type]).val()); //input标签，id为up_inerface的value值为Volvo,Opel
var val = jQuery(obj).val();
jQuery(arr[type]).val(val);
}
</script>
</head>
<body>
<form method="post" action="demoform.html">
<input type="text" name="up_inerface" id="up_inerface" value="Volvo,Opel"/>
<select multiple onclick="test_onclick(this,'up')">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br/>
<br/>
<input type="text" name="down_interface" id="down_interface" value="Opel,Audi"/>
<select multiple onchange="test_onclick(this,'down')">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
-
本文技巧
使用了 var arr={'up':'#up_inerface', 'down':'#down_interface'};数组，跟据变量对up和down的input，用统一行代码$(arr[type]).val(val);进行赋值。
-
代码解释
console.log(obj); 打印结果如下：
<select multiple="" οnclick="test_onclick(this,'up')">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
console.log($(obj));
console.log($(obj).val()); //获取点击的值
console.log(arr[type]); //#up_inerface
console.log($(arr[type])); //相当于$("#up_inerface")
console.log($(arr[type]).val());//input标签，id为up_inerface的value值为Volvo,Opel
参考连接：
js 根据value设置选择的option，以及获取选中option的value
https://blog.csdn.net/weixin_43632687/article/details/109617024
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
