使用jquery ui 实现select 查询框

最新推荐文章于 2023-04-07 17:24:54 发布
最新推荐文章于 2023-04-07 17:24:54 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linchen1102/article/details/31743049
版权
本文介绍了如何利用jQuery UI的Autocomplete组件来改进传统的select选择框，提供更好的用户体验。通过简单封装js和css，只需一行代码$("#id值").combobox()即可实现。注意在<select>选项中，值不应包含空格，以免因内容过长导致显示问题。
摘要由CSDN通过智能技术生成

jquery ui 之前一直不能实现比较好的 交互的select选择

最近 看ui有了新的例子 使用 Autocomplete 来实现功能 觉得不错 略微封装一下js和css就可以方便使用

jQuery ui 的demo地址 点击打开链接

简单封装一下 js 和 css 调用的时候使用 $( "#id值" ).combobox();一条语句就可以

需要注意的是 在select中 <option value="COBOL">COBOL</option>  <option>之间的值最好不要有空格否则 由于太长选中后会有显示的问题

上传一下简单的js

combobox.js

最低0.47元/天 解锁文章
linchen1102
关注
专栏目录
JQuery UI 之Selectable的一些基本用法
吴林
09-28 3949
关于JQuery UI的Selectable组件的用法，我想JQuery UI API已经描述的很清楚了，在这里不再赘述，请参考这里写链接内容在这里需要注意的就是要自己加入CSS代码。好下面叙述我在用这个组件过程中的遇到的一些问题： 1、选中之后获取选中的信息； 2、结合html5中的用户自定义属性来使用(data-*)； 3、如何动态也就是用代码让它初始化的时候就选中。在这里先看我的HTML
【JQuery】实现select功能/动态下拉框：
SunPeng的博客
07-21 2539
【JQuery】实现select功能：，固定数据，后台数据，获取多个值（value和id）
jQuery UI 实例 - 选择（Selectable）
最新发布
unber的博客
04-07 293
使用鼠标选择单个元素或一组元素。如需了解更多有关 selectable 交互的细节，请查看 API 文档。
jQuery UI Multiselect （jQuery UI 多选框）
10-10
jQuery UI Multiselect是一个Web UI控件,它将html multiple select inputs转换成一个更直关、更易于操作的多选控件。支持全选添加和删除操作。
基于jQueryUI对select下拉框美化插件
ICode联盟
12-14 330
下载地址 很不错的多功能下拉框美化，效果是非常不错的，插件支持自定义参数功能，定义高度，下拉动画效果，下拉的速度，还是很不错的，大家该把传统的select下拉框的样式改造的时候了。 dd: ...
jQuery UI Tabs 的 select升级改动
致知的博客
06-24 280
原来代码 $("#tabs").tabs({ select: function(event, ui) { $("#opertype").val(ui.index); //0: Manual 1: Scheduled 2.Source $("#messageBox").hide(); if(ui.index===0){ saveBtn.buttonBuild({name:"button_name"}); cancelBtn.show(); }el
JQ JS javascript layui UI框架 带搜索下拉框 select
04-17
JQ JS javascript layui UI框架 带搜索下拉框 select
结合jQueryUI对select下拉框美化插件.zip
07-11
结合jQueryUI对select下拉框美化插件，很不错的多功能下拉框美化，效果是非常不错的，插件支持 自定义参数功能，定义高度，下拉动画效果，下拉的速度，还是很不错的，大家该把传统的select下 拉框的样式改造的时候...
jq写的模拟elementui的select
05-07
jq写的模拟elementui的select，直接原生的可以add_el_select(obj)；加一行代码就可以，设置值使用 el_set_vlaue(obj)
jQuery UI MultiSelect 多选下拉框
11-01
一、基本属性 1.全选和全不选，如效果图中第3部分 checkAllText 默认值：check all uncheckAllText 默认值：uncheck all $("select").multiselect({ checkAllText： "全选"， uncheckAllText："全不选" }); 2.选中项的提示信息，如图中第2部分 selectedText 默认：# selected $("select").multiselect({ selectedText: 选中【#】项 ，总共【 #】项" }); 3.被选中的value值，如图第1部分显示的内容 $("select").find("option:selected").text(); 4.被选中的项对应的key值，返回数据格式如下： 1,2,3,6,7 var keys = $("#depart").val(); 二、基本事件 beforeopen 当下拉框被打开
jquery select带筛选下拉框代码.zip
07-05
脚本简介jquery select带筛选下拉框代码是一款基于bootstrap的js下拉框控件，支持搜索过滤数据，支持数据分组等其他使用功能。
Jquery结合jQueryUI实现的select下拉框美化以及功能性禁用的效果源码.zip
11-18
本文将详细介绍如何利用jQuery和jQuery UI实现select下拉框的美化和功能性禁用效果。 首先，jQuery是一个轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理、动画制作等任务。jQuery UI则基于jQuery，提供...
jquery select框应用jquery ui滑块slide
10-27
本文将详细探讨如何将jQuery Select框与jQuery UI的滑块（Slide）组件结合使用，以实现更丰富的用户界面和交互体验。 首先，jQuery是一个轻量级的JavaScript库，它提供了一套强大的DOM操作、事件处理、动画效果和...
JQueryUI学习文档
redrun博客
11-07 2280
文章目录JQUERYUIdiglogdialog外观选项dialog页面位置选择dialog大小选择（直接写数值，不用加pxdialog视觉效果dialog行为选项dialog()方法的事件dialog()使用on()按钮一，使用button按钮二，修改button样式三，button外观四。button('action',param)五，单选框，复选框工具提示UI1.调用tooltip方法之前首先需要针对元素设置响应的元素2.修改tooltip（）样式3.tooltip（）方法的属性外观样式tooltip
JQuery操作select框方法汇总
RickyOne_RR的博客
01-22 541
JQuery操作select方法汇总
jquery-ui-multiselect 实现select下拉多选
foyui的博客
11-19 4490
1.下载需要的插件： jquery-ui; 下载网站：http://jqueryui.com/download/all/（本实例使用jquery-ui-1.11.0） jquery-ui-multiselect; 下载网站：https://github.com/ehynds/jquery-ui-multiselect-widget 注意：    jquery-ui-1.11.0只需要/im
jquery-ui的dialog中select弹出内容显示在对话框之后的解决办法
my_live_123
03-17 1184
0.组件 jqueryui 的Selectmenu和dialog控件的组合使用 1.现象 如果在html中静态写入的控件，然后在dialog中显示它，那么select的下拉框会被对话框覆盖。 2. 原因 Its a z-index problem. When you use multiple jquery UI component, jquery library starts adding z-...
jQuery ligerUI分页实现详解
"基于jQuery ligerUI的分页样式实现与原理" jQuery ligerUI 是一个流行的前端组件库，尤其在创建高效、美观的用户界面时非常有用。ligerUI 提供了一个名为 ligerGrid 的核心控件，它允许开发者轻松创建具有高级功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值