js下拉选择框与输入框联动实现添加选中值到输入框的方法


Posted in Javascript onAugust 17, 2015

本文实例讲述了js下拉选择框与输入框联动实现添加选中值到输入框的方法。分享给大家供大家参考。具体如下:

这里演示js下拉选择框与输入框联动,直接添加选中值到输入框中的效果。这种效果相信不少朋友见到过吧,省去用户输入的麻烦,这里使用JS直接将值赋予输入框,了解原理之后,可灵活运用,扩展出更多的特效来。

运行截图如下:

js下拉选择框与输入框联动实现添加选中值到输入框的方法

在线演示地址如下:

具体代码如下:

<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程序设计有所帮助。

Javascript 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
实现只能输入数字的input不用replace方法
Sep 12 Javascript
Node.js中调用mysql存储过程示例
Dec 20 Javascript
javascript删除一个html元素节点的方法
Dec 20 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
Jan 04 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
Jan 26 Javascript
微信小程序swiper组件用法实例分析【附源码下载】
Dec 07 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
jquery在启动页面时,自动加载数据的实例
Jan 22 jQuery
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
jquery动感漂浮导航菜单代码分享
Apr 15 #Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 #Javascript
jquery实现动静态条形统计图
Aug 17 #Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 #Javascript
jquery+css3实现网页背景花瓣随机飘落特效
Aug 17 #Javascript
js简单实现Select互换数据的方法
Aug 17 #Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
Aug 17 #Javascript
You might like
使用Apache的rewrite技术
2006/06/22 PHP
用PHP与XML联手进行网站编程代码实例
2008/07/10 PHP
PHP中改变图片的尺寸大小的代码
2011/07/17 PHP
PHP实现的购物车类实例
2015/06/17 PHP
php基础教程
2015/08/26 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
分享8个Laravel模型时间戳使用技巧小结
2020/02/12 PHP
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
2015/06/16 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
JavaScript编写页面半透明遮罩效果的简单示例
2016/05/09 Javascript
总结在前端排序中遇到的问题
2016/07/19 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
如何将python中的List转化成dictionary
2016/08/15 Python
对Python信号处理模块signal详解
2019/01/09 Python
Django中使用极验Geetest滑动验证码过程解析
2019/07/31 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python中使用filter过滤列表的一个小技巧分享
2020/05/02 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
班会关于环保演讲稿
2013/12/29 职场文书
写给保洁员表扬信
2014/01/08 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
学雷锋先进个人事迹
2014/05/26 职场文书
小学运动会口号
2014/06/07 职场文书
党员个人年度总结
2015/02/14 职场文书
故意伤害辩护词
2015/05/21 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python