JS实现多个下拉框值拼接至文本框的示例

作者:拾光

时间:2026-10-27

浏览:258

本文提供了一个简单的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>

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章