JS实现点击下拉菜单把选择的内容同步到input输入框内的实例
作者:长歌丶 时间:2023-09-08 19:50:10
最近博主在边学flask边写测试平台,碰到一个比较常用的场景如下图所示
这里有一个输入框组,下拉菜单里面有3个选项,还有一个输入框,代码是用 bootstrap写的,代码也给大家贴出来
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
项目名称
<span class="caret"></span>
</button>
<ul id="project" class="dropdown-menu">
<li value="account"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >account</a></li>
<li class="divider"></li>
<li value="drive"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >drive</a></li>
<li class="divider"></li>
<li value="qing"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >qing</a></li>
</ul>
</div>
我的目的是当我点击这个下拉菜单中的某个选项的时候,能够自动获取到值,填写到input中,这样就省去了之前版本只有一个input还得用户自己手动打的麻烦。怎么做同步呢,当然是用js去做个监听了,也比较简单。
$("#project").on("click", "li", function(){
$("#proname").val($(this).text());
});
这段代码的意思就是,监听ul的点击事件,对象是下面的li元素,当点击li的时候,获取到li中的text文本赋值给input输入框的value,实现的效果如下图。
来源:http://blog.csdn.net/qq_14908027/article/details/78610846
标签:JS,下拉菜单,同步,input,输入框
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Python函数默认参数设置的具体方法
2021-03-13 08:19:07
GoLang抽奖系统简易实现流程
2024-04-30 10:02:24
Vue实现父子组件页面刷新的几种常用方法
2024-06-07 16:05:52
![](https://img.aspxhome.com/file/2023/3/121963_0s.png)
Python facenet进行人脸识别测试过程解析
2021-03-27 14:24:04
![](https://img.aspxhome.com/file/2023/1/89161_0s.png)
PHP执行linux系统命令的常用函数使用说明
2023-10-19 11:28:39
泛泛而谈界面中的斑马纹设计
2010-07-15 12:59:00
![](https://img.aspxhome.com/file/UploadPic/20107/15/bm-001-76s.jpg)
SQL语句练习实例之七 剔除不需要的记录行
2011-11-03 16:50:51
ASP.NET web.config中 数据库连接字符串加密解密
2024-01-14 07:02:09
Python真题案例之最长回文子串 周期串详解
2021-12-01 02:57:02
![](https://img.aspxhome.com/file/2023/2/135442_0s.png)
从列表或字典创建Pandas的DataFrame对象的方法
2022-06-12 13:03:45
![](https://img.aspxhome.com/file/2023/2/130642_0s.png)
Python实现递归遍历文件夹并删除文件
2021-09-06 09:51:17
Python实现base64编码的图片保存到本地功能示例
2024-01-01 22:58:03
![](https://img.aspxhome.com/file/2023/7/89207_0s.jpg)
一个完整的PHP类包含的七种语法说明
2023-11-16 13:02:07
如何编写高质量的Javascript代码
2011-03-07 16:04:00
十几行的超简日历组件(兼容FF)js源码
2010-08-08 08:49:00
详解MySQL主从复制及读写分离
2024-01-21 12:27:14
![](https://img.aspxhome.com/file/2023/3/120853_0s.png)
python批量telnet检测IP地址的端口是否开放
2023-12-28 12:12:24
![](https://img.aspxhome.com/file/2023/9/118649_0s.png)
Python版的文曲星猜数字游戏代码
2023-08-12 16:39:19
python数组过滤实现方法
2021-09-11 20:28:44
vue2过滤器模糊查询方法
2024-04-28 09:21:03