表单/表格

tinySelect - 搜索过滤ajax加载下拉框插件

创客主机

tinySelect - 搜索过滤ajax加载下拉框插件-创客云
tinySelect.js 是一款支持选项搜索过滤和 Ajax 远程加载的 select 下拉选择框 jQuery 插件。该下拉选择框插件可以搜索相关选项,可以通过 Ajax 调用 json 数据来填充下拉框,并且它支持中文,非常实用。

HTML 结构

该下面来看可以实用静态的选项数据,HTML 结构为普通的 select 下拉框结构:

也想出现在这里?联系我们
WordPress 主题
  1. <select id="select1">
  2.   <option value="-1">option a</option>
  3.   <option value="1">option b</option>
  4.   <option value="2">option c</option>
  5.   <option value="3">option d</option>
  6.   <option value="4">option e</option>
  7.   <option value="5">option f</option>
  8.   <option value="6">option g</option>
  9.   <option value="7">option h</option>
  10. </select>

如果选项数据是通过 Ajax 远程加载的,可以只提供<select>元素和初始选项。

  1. <select id="select3" style="width: 100%;">
  2.   <option value="-1">---</option>
  3. </select>

初始化插件

在页面 DOM 元素加载完毕之后,可以通过 tinyselect()方法来初始化该下拉框插件。

  1. $("#selectElementId").tinyselect({
  2.     showSearch: true,
  3.     txtLoading: "Loading..."
  4. });

配置参数

参数 描述
showSearch 是否显示搜索框
txtLoading 当远程加载时显示的文本
txtAjaxFailure 远程加载失败时显示的文本
dataUrl 远程加载数据的地址,如果没有设置,插件会从 select 元素中读取内容
dataParser 自定义函数从 ajax 请求中解析数据

Github 地址:https://github.com/McFizh/tinySelect

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!