JS实现多个下拉框值拼接至文本框的示例
作者:拾光时间:2026-10-27 12:21:06浏览:259
本文提供了一个简单的JavaScript示例,演示如何将多个下拉选择框(select)的选中值直接拼接并显示在同一个文本输入框(input)中。通过监听下拉框的onChange事件触发函数,获取各选项的value属性值进行字符串连接,实现实时同步显示。
JS实现多个下拉框值拼接至文本框的示例
具体实现代码如下:
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
function doit(ofrm){
//ofrm.t1.value=parseInt(ofrm.s1.value)+parseInt(ofrm.s2.value)+parseInt(ofrm.s3.value)+parseInt(ofrm.s4.value);
ofrm.t1.value=ofrm.s1.value+ofrm.s2.value+ofrm.s3.value+ofrm.s4.value;
}
</script>
</HEAD>
<BODY>
<form name="tfrm">
<select name="s1" onChange="javascript:doit(this.form);">
<option value="*" selected>请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="s2" onChange="javascript:doit(this.form);">
<option value="*" selected>请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="s3" onChange="javascript:doit(this.form);">
<option value="*" selected>请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="s4" onChange="javascript:doit(this.form);">
<option value="*" selected>请选择</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" name="t1" value="">
</form>
</BODY>
</HTML>作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
