首页
学习
活动
专区
圈层
工具
发布

select2 使用教程(简)「建议收藏」

一.文件需要引入select2.full.js、select2.min.css(4.0.1版本)和jquery.1.8.3及以上 最新版本的select2如果引用的jquery版本较低的话,某些功能无法正常使用...formatRepo, templateSelection: formatRepoSelection }); 说明: 1.q: params.term 查询参数(params.term表示输入框中内容...,q发生到服务器的参数名;所以这里你可以添加自定义参数,如:stype:’person’) 2.processResults中results: data返回数据(返回最终数据给results,...);(新版) 5.主题样式:新版的样式已经更新,但如果想使用老版样式则可以设置 theme: “classic” Select2控件介绍 这个插件是基于Select的扩展插件,能够提供更加丰富的功能和用户体验...1)编辑界面下的省份、城市、所在行政区的级联界面效果,选择省份,会加载对应省份下的城市,选择城市,会继续加载城市下的行政区,从而实现多级关联的下拉列表效果。

29.6K20

重构旧项目:从 jQuery 迁移到 Vue 3 的分步方案与避坑指南

jQuery 插件依赖:select2、datepicker、datatables、validation 等。 全局变量与工具: 的使用范围、.ajax 包装、事件总线习惯。...DOM 管理权交接 将一个页面中的“功能岛”替换为 Vue 组件(如过滤器、列表、弹窗)。 保留 jQuery 插件,外包裹 Vue 组件或指令,统一生命周期。 4....表单与校验 采用受控组件与校验库(如 vee-validate、yup)。 统一错误提示与交互反馈。 7. 构建与发布 代码分割与按需加载,拆分旧页面与新组件。 灰度发布与开关控制,保留回退路径。...性能与可观测性 按需加载:路由级与组件级分割。 虚拟列表与懒加载:对长列表与重组件管理渲染成本。 埋点与日志:记录首屏、交互时延、错误码与请求量。...迁移检查清单 是否完成关键模块的组件化替代。 jQuery 插件是否以指令或组件封装并清理生命周期。 服务层是否统一到 axios/fetch 并具备取消与重试。

23310
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    解决Select2控件不能在jQuery UI Dialog中不能搜索的bug

    本文使用博客园Markdown编辑器进行编辑 1.问题呈现 项目中使用了jQuery UI的Dialog控件,一般用来处理需要提示用户输入或操作的简单页面。逻辑是修改一个广告的图片和标题。...效果截图如下: 使用Select2,主要是因为它支持下拉式搜索。所以在数据稍微多一点,作为搜索选择功能的首选。但是运行出来之后,发现搜索框无法点击。开始想到的index不够大,被其他的元素覆盖了。...2.解决办法 通过Google搜索,发现select2作者在github上说明了这个问题: 但是他给出解决的方法,我看不太懂,后面也有人说直接修改jQuery UI类库,但是我们项目中使用的jquery-ui...hot fix代码如下: hot fix:Select2控件在jQuery UI弹出对话中不能搜索 $.widget("ui.dialog", $.ui.dialog, { open:...这样在遇到不可知的bug时,能快速找到问题的根源是关键。这也是工作之后,leader或者manager更加强调你发现问题和解决问题的能力。

    2.1K100

    select2 api参数的文档

    id 函数 函数用于获取id从选择对象或字符串id存储代表的关键 matcher 函数 用于确定是否搜索词匹配一个选项时使用一个内置的查询功能 sortResults 函数 用于排序列表搜索之前显示的结果...formatAjaxError 字符串/函数 字符串包含消息“加载失败”,或 函数用于呈现信息 formatInputTooShort 字符串/函数 包含“搜索”输入太短消息的字符串,或 函数用于呈现信息...有用的用户可以创建动态的选择时,如“标签”usecase。...函数 记号赋予器函数可以处理后输入搜索框的输入每一个按键和提取 并选择选择。...默认情况下这个功能转义的html实体,以防止javascript注入。 selectOnBlur 布尔 设置为 真正的 如果你想要Select2选择当前高亮选项时模糊。

    7.2K50

    jQuery基础(五)一Ajax应用与常用插件-imooc

    ,将指定的字段名内容显示在页面中。...,点击“检测”按钮,调用post()方法向服务器以POST方式发送请求,检测输入值的奇偶性,并显示在页面中,如下图所示:       0){         echo '大于0';     }else if( 当点击“检测”按钮时,获取输入框中的值,并将该值使用...的值,w3c盒子模型不包含,IE盒子模型则包含,而在jQuery 中,可以通过$.support.boxModel对象返回的值,检测浏览器是否属于标准的w3c盒子模型。...4-3检测对象是否为空 在jQuery中,可以调用名为.isEmptyObject的工具函数,检测一个对象的内容是否为空,如果为空,则该函数返回true,否则,返回false值,调用格式如下:.isEmptyObject

    19.2K20

    50个必备的实用jQuery代码段

    jQuery 判断元素上是否绑定了事件 //jQuery event封装支持判断元素上是否绑定了事件,此方法只适用于jQuery绑定的事件 var $events = $("#foo").data("events...如何在jQuery中克隆一个元素: var cloned = $('#somediv').clone(); 在jQuery中如何测试某个元素是否可见 if($(element).is(':visible...: var tog = false; // 或者为true,如果它们在加载时为被选中状态的话 $('a').click(function() {   $("input[type=checkbox]...); 如何检查图像是否已经被完全加载进来 $('#theImage').attr('src', 'image.jpg').load(function() {   alert('This Image...date.setTime(date.getTime() + (x 60 1000)); $.cookie('example', 'foo', { expires: date }); 如何使用一个可点击的链接来替换页面中任何的

    8K00

    如何编写一个 Vue JS 内嵌组件

    Vue 「内嵌」组件是一种用于将第三方插件与 Vue 集成在一个自定义 Vue 组件中的技术。 内嵌意味着你可能会引入像 jQuery 和 jQuery 插件这样的库。...jQuery 选择器,所以需要我们在组件中复制它。...就我看来,我希望日期范围选择器是一个可点击的按钮,但用户会因此无法通过表单输入来编辑日期范围。 为此,我们有一个组件在日期范围更新时发出事件。...在这个组件的例子中,你可以学习如何通过使用组件的根 DOM 元素 this.$el 来内嵌一个 jQuery 插件、如何在安装组件时初始化一个插件,以及如何连接插件来将数据发送到父组件。...Vue 的官方文档有一个 内嵌组件示例,它演示了如何使用流行的 Select2 jQuery 插件与 v-model 的内嵌 Vue 组件绑定一个自定义的内嵌组件。

    5.2K40

    学习jQuery?这篇文章就够了

    jQuery对象.size(); // 获取 jQuery 中包含元素的个数 jQuery对象.val(); // 操作元素的 value 属性...3、如何使用选择器获取元素 语法:(“选择器”) ,如 (“#mydiv”)。...注意:如果通过 jQuery 方法获取页面中元素,没有查找到,返回值不是 null,返回值为一个空数组 [],所以判断是否获取到元素,通过 jQuery.size() != 0 来判断。...说明:element 的英文翻译过来是“元素”,所以 element 其实就是 HTML 已经定义的标签元素,例如 div,input,a 等等。...(事件名, 响应函数); 2、jQuery 事件绑定 查看 jQuery 文档:jQuery对象.click(fn),页面加载事件处理,对比之前使用原生的区别,之前只能绑定一个处理函数。

    13.6K10

    那些前端常用的网站插件

    Javascript 库 Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库 Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库 Fullpage.js...创建漂亮的图表 Instantclick — 能够明显加速网站加载时间,鼠标 hover 时预加载资源 Chartist — 另一个图表库 Motio — 一个基于动画和平移的雪碧图库 Animsition... — 滚动时展现动画 Scrolline.js — 页面滚动时显示滚动进度 Velocity.js — 快速流畅的 JavaScript 动画 Animate on scroll — 漂亮的页面滚动元素动画... — 实时格式化输入内容 Page — 客户端单页应用路由 Selectize.js — 用来添加 tag 的 Hybrid 选择框 Nice select — 创建漂亮的选择框的 jQuery 库 Tether... — 使用固定定位来创建相关元素 Shepherd.js — 为应用创建新手引导 Tooltip — tooltip 提示框 Select2 — Jquery 选择框插件 IziToast — 通知弹窗实现

    5.4K50

    Asp.Net MVC4入门指南(8):给数据模型添加校验器

    您可以在一个地方 (模型类) 中以声明的方式指定验证规则,这个规则会在应用程序中的任何地方执行。 让我们看看您如何在本电影应用程序中,使用此验证支持。...Title 和Genre 字段不再可以为 null (即,您必须输入一个值) 并且Rating 字段具有最大长度是 5。 验证属性将指定一个验证行为,这样您可以指定模型中的那个属性需要被强制验证。...您可能已经注意到了Title 和Genre属性,在字段中输入文本或者删除文本,是不会执行所需的验证属性的,直到您提交表单 (点Create按钮)时才执行。...对于字段是最初为空 (如创建视图中的字段) 和只有Required属性并没有其它验证属性的字段,您可以执行以下操作来触发验证: 1. Tab into the field. 2....上面的顺序将触发必需的验证,而并不需要点击提交按钮。在不输入任何字段的情况下,直接点击提交按钮,将触发客户端验证。直到没有客户端验证错误的情况下,表单数据才会发送到服务器。

    6.4K100

    jQuery 教程

    该事件方法在 jQuery 语法 章节中已经提到过。 click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。...在下面的实例中,当点击事件在某个 元素上触发时,隐藏当前的 元素: $("p").click(function(){ $(this).hide(); }); dblclick() 当双击元素时...检测浏览器是否使用W3C的CSS盒模型渲染当前页面 $.browser 在版本 1.9 中被废弃。...() 确定回调是否至少已经调用一次 callbacks.firewith() 给定的上下文和参数访问列表中的所有回调 callbacks.has() 判断回调列表中是否添加过某回调函数 callbacks.lock...从jQuery1.7开始已经过时,确定 Deferred 对象是否已被拒绝 deferred.isResolved() 从jQuery1.7开始已经过时,确定 Deferred 对象是否已被解决 deferred.notify

    21.1K20

    高质量编码-GIS搜索框前端实现

    image.png 原来代码根据是否有分页,而采取focusGeoJson还是drawGeoJson image.png image.png image.png 这几个函数也是我们需要改动的代码...image.png image.png image.png image.png image.png 当我们每次输入内容或者点击分页时,会立即去构造请求,返回结果绑定在下拉列表中,同时添加到地图图层中...: image.png 其实这种查询就够用了,但是通常我们会有伪需求,查询时选择类型,于是再次改造,添加了下拉列表来选择查询类型: image.png 需要我们在构造函数构建DOM的地方添加我们的...select,并在调用初始化函数前,填充option数据,这里使用了select2 jquery插件 image.png 同时添加事件,使得下拉列表改变选项时,更新自己的geojsonServiceAddress...请求参数改变来实现这个功能: image.png image.png 最后注意原来代码中为了避免输入事件频繁,使用了自定义的延迟事件。

    3K20

    前端组件库_前端组件库有什么好处

    autosize – 使文本框自动适应所输入的内容 11....– jQuery鼠标滚轮滚动侦测插件 13.2 瀑布流 Masonry Isotope – Filter & sort magical layouts 13.3 图片懒加载/加载监听 imagesLoaded...pagePiling.js – 全屏滚动效果 13.13 分屏滚动 multiscroll.js – 分屏滚动效果 13.14 转场效果 Animsition – 页面切换时的过渡效果 13.15 固定元素...13.17 拖拽组件 Draggabilly – 专注于拖拽功能的 JS 库 13.18 隐藏或展示页面元素 Headroom.js – 在不需要页头时将其隐藏 Readmore.js – 内容显示与隐藏插件...PNG图片 nakedpassword – 用脱衣女帮助检测密码强度 PDF.js – 一个 JavaScript 编写的 PDF 阅读器 ---- 前端参考集 frontend-guidelines

    7.7K10

    探索 JQuery EasyUI:构建简单易用的前端页面

    3.4.1 主要属性url: 设置数据源的 URL 地址,用于加载表格数据。columns: 设置表格的列信息,包括标题、字段名、宽度、对齐方式等。pagination: 设置是否显示分页条。...表格的列信息包括 ID、Name 和 Age,分别对应数据源中的字段。我们还设置了一个工具栏,包含一个添加按钮,点击按钮时会弹出一个提示框显示 "Add button clicked"。...3.6 Form 表单组件Form 表单组件可以将各种表单元素(如输入框、下拉框、复选框等)组合在一起,形成一个完整的表单,用户可以在表单中输入信息并提交给服务器进行处理。...用户可以在页面上看到用户列表,点击“Add User”按钮可以弹出添加用户的对话框,输入用户信息后点击“Save”按钮即可将用户信息保存到后端数据库中。...用户可以在页面上看到任务列表,点击工具栏按钮可以弹出添加或编辑任务的对话框,输入任务信息后点击保存按钮即可将任务信息保存到后端数据库中,同时也可以删除已有的任务。

    3.2K10

    AngularJS的digest循环和$apply

    一、传统事件触发 在标准的浏览器流程中,页面加载、$http请求返回响应、鼠标移动以及按钮被点击等情况都会触发事件。...当事件被触发时(比如点击一个链接),JavaScript会创建一个事件对象,并执行这个事件对象所在的监听特定事件的所有函数。然后浏览器会执行注册给该事件的回调函数,更新DOM。...这些watch列表会在watch列表会在digest循环中的“脏值检查”(检测值是否发生了变化,但整个应用还没有同步该变化)的程序解析。...三、页面中的$digest循环 (1)angular会设置一个隐式的监控器,将输入字段的值绑定为当前的...当手动处理事件,使用第三框架(比如jquery)或者调用setTimeout都可以使用apply()函数将值传递到angular应用中。

    4.3K41

    每个程序员都会的 35 个 jQuery 小技巧

    预加载图片 如果你的页面中使用了很多不可见的图片(如:hover 显示),你可能需要预加载它们: $.preloadImages = function () { for (var i = 0; i...').attr('src', arguments[i]); } }; $.preloadImages('img/hover1.png', 'img/hover2.png'); 检查图片是否加载完成...你可以把 img 替换为其他的 ID 或者 class 来检查指定图片是否加载完成。...鼠标悬停(hover)切换 class 属性 假如当用户鼠标悬停在一个可点击的元素上时,你希望改变其效果,下面这段代码可以在其悬停在元素上时添加 class 属性,当用户鼠标离开时,则自动取消该 class...禁用 input 字段 有时你可能需要禁用表单的 submit 按钮或者某个 input 字段,直到用户执行了某些操作(例如,检查“已阅读条款”复选框)。

    5.3K10

    前端开发者都应知道的 jQuery 小技巧

    回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度...Hover 上的 Class 切换 如果用户的鼠标悬停在页面上某个可点击元素时,你想要改变这个元素的视觉表现。...禁用 input 字段 有时你也许想让表单的提交按钮或其文本输入框变得不可用,直到用户执行了一个特定行为(例如确认 “我已经阅读该条款” 的复选框)。...但如果想让该元素在第一次点击时显现,第二次点击时消失,下面的代码可以很好地完成这个工作: // Fade $('.btn').click(function () { $('.element').fadeToggle...通过文本找到元素 通过使用 jQuery 中的 contains() 选择器,你可以找到某个元素中的文本。

    3.5K30
    领券