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 相关文章推荐
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
Oct 11 Javascript
js锁屏解屏通过对$.ajax进行封装实现
Jul 31 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
在Vue项目中,防止页面被缩放和放大示例
Oct 28 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
php图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php开发中的页面跳转方法总结
2015/04/26 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
浅谈Jquery核心函数
2015/06/18 Javascript
jQuery解决浏览器兼容性问题案例分析
2016/04/15 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
利用原生JS实现data方法示例代码
2019/05/28 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
Python中除法使用的注意事项
2014/08/21 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
浅谈Python中带_的变量或函数命名
2017/12/04 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
matplotlib 输出保存指定尺寸的图片方法
2018/05/24 Python
详解Python函数式编程—高阶函数
2019/03/29 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
selenium+python环境配置教程详解
2019/05/28 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
10个示例带你掌握python中的元组
2020/11/23 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
HTML5实现移动端弹幕动画效果
2019/08/01 HTML / CSS
中科前程Java笔试题
2016/11/20 面试题
《水乡歌》教学反思
2014/04/24 职场文书
我的职业生涯规划:打造自己的运动帝国
2014/09/18 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2015年小学中秋节活动总结
2015/03/23 职场文书
《草虫的村落》教学反思
2016/02/20 职场文书
pytorch中Schedule与warmup_steps的用法说明
2021/05/24 Python