用jquery模仿做下拉列表

最新推荐文章于 2022-05-09 07:15:00 发布
最新推荐文章于 2022-05-09 07:15:00 发布
阅读量1k 收藏
点赞数
分类专栏： ajax/jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/spring123tt/article/details/9232813
版权

之前做一个纯键盘操作的系统，发现原本该用下拉列表的地方，用键盘不好使用。于是决定做一个类似于下拉列表的东西，采用键盘来模拟点击和选取。

啥也不说，先上图。这只是个草图，具体放到应用中是需要去完善css的，否则这么粗糙，等着领导批死吧！


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

咳咳.....效果图我们就不关注了，怎么做的才是ZD！

代码比较长，我还是贴文件url好了：

http://note.youdao.com/share/?id=1bf5761d55dde5353a1901afbf9f9c4c&type=note


spring123tt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用jquery实现下拉列表
我的专栏
01-04 724
下拉式菜单 *{margin: 0px; padding: 0px;}/*去掉默认边距*/ #menu{background: #eee; width: 600px; height: 40px; margin: 0 auto; margin-top:100px; }
jquery仿百度下拉列表搜索框
08-22
本项目“jquery仿百度下拉列表搜索框”旨在利用jQuery的功能，模仿百度搜索引擎的智能下拉列表功能，提供用户友好的模糊查询体验。 首先，我们要了解jQuery的核心概念。jQuery通过一种简化的语法，使开发者可以更...
用jQuery模拟select下拉框的简单示例代码
12-10
很多时候，美工会觉得默认的select下拉框很难看（特别是右侧的下拉箭头按钮），他们通常喜欢用一个自定义的图标来代替这个按钮。这样就只能用 js + div 来模拟了，倒腾了一番，用jQuery模拟了下，当然网上这种文章也不少，只是懒得去看找 代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head>   
jQuery模拟下拉框多种方法实现
kylinxjd的博客
05-29 750
html代码 <body> <div class="box"> <ul> <li> <a href="http://www.baidu.com" id="a_name">地址</a> <ul> ...
jQuery实现下拉菜单[代码+详细讲解+效果图]
热门推荐
心态的博客
05-09 1万+
jQuery实现下拉菜单[代码+详细讲解+效果图] 非常的高效。
jq 获取textarea选中内容_jQ模拟下拉框以及向下三角
weixin_39575007的博客
12-03 230
界面;问题：因为select自带得option不能自适应宽度，意味着option宽度有时候会比select宽度长，如下图：解决：自己模拟写一个select带向下三角得下拉框；原理：1、我这里用的div当作一个框，里面包含下拉框选中内容和三角形（三角形是靠css实现得)2、用ul/li模拟一个显示隐藏得下拉框；3、jq获取元素以及显示隐藏元素都比较方便，原生也差不多；4、js事件比如下拉框得鼠标移入...
JQuery实现下拉框
qq_37348649的博客
04-02 1496
jquery 的 下拉框第一次Coding，感觉炸疯了，为了小伙伴不在和我一样，我决定把这简单又基础的代码Show出来， <div class="bjui-row col-1"> <label class="row-label" style="width: 150px">任务人:</label> <div class="row-input required"> .
jQuery模仿百度关键词下拉匹配效果.zip
最新发布
09-22
3. **jQuery代码**：在JavaScript文件中，我们需要监听输入框的`keyup`事件，当用户输入时，实时更新下拉列表的内容。同时，我们还需要处理鼠标点击下拉选项时的事件。 ```javascript $(document).ready(function()...
jQuery UI仿淘宝搜索下拉列表功能
10-20
主要为大家详细介绍了Jquery UI 模仿淘宝搜索下拉列表功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery下拉列表插件
03-17
这个插件名为“selectBox”，它旨在模仿并扩展下拉列表的功能，为用户带来更好的使用体验。 首先，原生的HTML `<select>` 元素虽然简单实用，但在样式定制和交互性方面存在局限。`selectBox` 插件则通过jQuery实现...
一个基于jquery的简单下拉框实现
04-15
NULL 博文链接：https://shuaijie506.iteye.com/blog/1754577
jquery实现的下拉菜单
03-24
NULL 博文链接：https://wuhao1014yi.iteye.com/blog/1076012
jQuery实现下拉菜单.
04-14
使用jQuery制作的一个下拉菜单，可以直接使用，使用的时候，建议将对应大文件放在指定的位置上，并修改link和script标签中的地址
精美漂亮的实用div+css模仿select下拉框控件
03-01
基于jq.模仿select动作。。 好看使用。很不错。欢迎大家给意见、
jquery实现下拉菜单
09-12
jquery实现下拉菜单
下拉列表使用
01-16
9. 模仿下拉列表： 为了实现更复杂的功能或更好的视觉效果，开发者有时会选择用JavaScript库（如Select2、Chosen等）来模拟下拉列表，这些库提供了搜索、多选等特性。 在提供的TestDemo中，很可能是包含了上述一些...
jq模仿下拉菜单select
weixin_30642869的博客
06-23 179
今天公司app ios版内测，发现select在安卓和ios上样式不统一，并且不好修改，一气之下放弃使用select，手写了一个用div模仿select的模块 话不多说上代码 //样式 .zezhao { width: 100%; height: 800px; background-color: rgba(0, 0, 0, 0.7); position: fixed;...
jquery下拉菜单怎么做,一个简单的纯手写例子
LYBWWP
08-08 3875
nav a { text-decoration: none; } nav > ul > li { float: left; text-align: center; padding: 0 0.5em; } nav li ul.sub-me
用JQuery做一个简单的下拉列表
gaowenbo1123的博客
10-25 642
用JQuery做一个简单的下拉列表 1、以下是效果图 2、下面是css样式 <style> * { margin: 0; padding: 0; } ul { list-style: none; } .biao { width: 330px; height: 30px; margin: 10...
jquery下拉列表框
06-02
你可以使用以下代码来创建一个基本的下拉列表框： HTML: ```html <option value="option1">Option 1 <option value="option2">Option 2 <option value="option3">Option 3 ``` JavaScript (使用 jQuery): `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值