js下拉选择框与输入框联动实现添加选中值到输入框的方法
更新时间：2015年08月17日 14:40:10 作者：企鹅
这篇文章主要介绍了js下拉选择框与输入框联动实现添加选中值到输入框的方法,涉及javascript中onchange事件及页面元素遍历的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法。分享给大家供大家参考。具体如下：
这里演示js下拉选择框与输入框联动，直接添加选中值到输入框中的效果。这种效果相信不少朋友见到过吧，省去用户输入的麻烦，这里使用JS直接将值赋予输入框，了解原理之后，可灵活运用，扩展出更多的特效来。
运行截图如下：
在线演示地址如下：
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程序设计有所帮助。
相关文章
这篇文章主要介绍了微信小程序input框中加入小图标的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-06-06
select每选择一个option选项减少对应的option实现方法
这篇文章主要为大家介绍了select每选择一个option选项减少对应的option实现方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-12-12
闭包，官方对闭包的解释是：一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分2016-02-02
这篇文章主要介绍了JavaScript中的闭包介绍,本文讲解了Javacript 闭包、Javscript 闭包与this、Javscript 闭包与读写变量等内容,需要的朋友可以参考下2015-03-03
这篇文章通过实例代码给大家讲解了通过js统计页面上每个标签的数量，代码很简单，具有一定的参考借鉴价值，需要的朋友参考下吧2018-05-05
这篇文章主要为大家详细介绍了小程序自定义模板实现吸顶功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
迭代器是一个统一的接口，它的作用是使各种数据结构可以被便捷的访问，它是通过一个键为Symbol.iterator的方法来实现，这篇文章主要介绍了ES6 中的迭代器和生成器,需要的朋友可以参考下2022-11-11
函数就是一种封装,由事件驱动的或者当它被调用时执行的可重复使用的代码块,下面这篇文章主要给大家介绍了关于JavaScript函数的定义和基本使用方法的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
这篇文章主要介绍了JS前端面试基本排序算法原理与实现方法,结合实例形式详细分析了JS常见的基本排序算法相关原理、实现方法、时间复杂度及操作注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了JavaScript实现登录滑块验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-04-04
最新评论