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中关于break,continue的特殊用法与介绍
May 24 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
js重写alert控件(适合学习js的新手朋友)
Aug 24 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
jQuery源码解读之removeClass()方法分析
Feb 20 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
原生js实现验证码功能
Mar 16 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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生成图片缩略图的方法
2015/04/07 PHP
php的mail函数发送UTF-8编码中文邮件时标题乱码的解决办法
2015/10/20 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
jquery实现奇偶行赋值不同css值
2012/02/17 Javascript
理解javascript封装
2016/02/23 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
微信小程序实现实时圆形进度条的方法示例
2017/02/24 Javascript
jQuery使用zTree插件实现可拖拽的树示例
2017/09/23 jQuery
React实践之Tree组件的使用方法
2017/09/30 Javascript
JavaScript体验异步更好的解决办法
2018/01/08 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
js实现带积分弹球小游戏
2020/07/21 Javascript
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
打印出python 当前全局变量和入口参数的所有属性
2009/07/01 Python
Python创建日历实例
2014/08/21 Python
python中的编码知识整理汇总
2016/01/26 Python
python实现Flappy Bird源码
2018/12/24 Python
用pycharm开发django项目示例代码
2019/06/13 Python
Numpy之reshape()使用详解
2019/12/26 Python
css3的transition属性详解
2014/12/15 HTML / CSS
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
设计师大码女装:11 Honoré
2020/05/03 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
公务员职业生涯规划书范文  
2014/01/19 职场文书
分公司任命书
2014/06/06 职场文书
同意离婚答辩状
2015/05/22 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
java解析XML详解
2021/07/09 Java/Android
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL