JS下拉选择框与输入框联动实现选中值自动填充

作者:函数茶馆时间:2026-10-29 13:58:05浏览:346

本文介绍如何利用JavaScript实现下拉选择框与输入框的联动效果。当用户在下拉菜单中做出选择时,选中的值会自动填充到指定的输入框中,无需手动输入。通过监听select元素的onchange事件,获取选中项的值并赋值给input元素,从而简化用户操作流程,提升交互体验。

JavaScript下拉框与输入框联动实现

本文通过具体实例,详细讲解如何使用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程序设计有所帮助。

作者最新文章