JS下拉选择框与输入框联动实现选中值自动填充
作者:函数茶馆时间:2026-10-29 13:58:05浏览:346
本文介绍如何利用JavaScript实现下拉选择框与输入框的联动效果。当用户在下拉菜单中做出选择时,选中的值会自动填充到指定的输入框中,无需手动输入。通过监听select元素的onchange事件,获取选中项的值并赋值给input元素,从而简化用户操作流程,提升交互体验。
JavaScript下拉框与输入框联动实现
本文通过具体实例,详细讲解如何使用JavaScript实现下拉选择框与输入框之间的联动功能,即将下拉菜单中选中的值自动添加到输入框中。
该示例演示了下拉选择框与输入框联动的效果,用户只需在下拉列表中选择一项,其值便会直接填入输入框内。这种机制避免了用户手动输入的繁琐步骤,通过JavaScript直接将选中值赋予输入框,掌握其原理后可灵活扩展更多交互特效。
运行效果截图如下:

在线演示地址如下:
http://demo.jb51.net/js/2015/js-select-value-to-input-codes/
具体实现代码如下:
<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>
希望本文所述内容对大家的JavaScript程序设计有所帮助。
作者最新文章
JS split切割后出现空字符串怎么过滤
2026-11-05 16:00:30
在 React 或 Vue 项目中封装使用 JS 节流防抖
2026-11-05 15:27:29
JavaScript中怎么将带小数的字符串转为整数?
2026-11-05 14:32:38
怎么用JavaScript策略模式重构电商促销计算逻辑?
2026-11-05 14:01:09
JS使用constructor判断数据类型可靠吗
2026-11-05 13:49:41
相关标签:
