自定义选择 动态数据 jQuery插件 FancyDropdown

  • 源码大小:25.15KB
  • 所需积分:1积分
  • 源码编号:19JP-3762
  • 浏览次数:1238次
  • 最后更新:2023年07月20日
  • 所属栏目:表单
本站默认解压密码:19jp.com 或 19jp_com

简介

jQuery库使得向选择框中添加动态数据变得非常容易。

这个FancyDropdown jQuery插件可以很快将输入字段转换为具有动态数据的语义、SEO友好的下拉选择。所有下拉选项都呈现为列表项,并且所选数据存储在隐藏的输入字段中。

正如我们在演示中所展示的,这个自定义选择jQuery插件是一个强大的工具,它允许用户使用从数组或JSON文件加载的动态数据创建外观漂亮的自定义选择下拉列表,只需几行代码。更重要的是,它是完全可定制的,并且易于实现。

如何使用它:

1.将jQuery库和FancyDropdown插件的文件插入到文档中。

  1. <link rel="stylesheet" href="/path/to/index.css" />
  2. <script src="/path/to/cdn/jquery.min.js"></script>
  3. <script src="/path/to/index.js"></script>

2.添加CSS类花式下拉菜单到目标输入字段,并在JS数组中定义您的选项,如下所示:

  1. <input
  2. type="text"
  3. value=""
  4. class="fancy-dropdown"
  5. data-fd-options="['jQuery', 'Script', 'Net']"
  6. readonly
  7. />

3.或者将数据定义为JSON字符串,如下所示:

  1. <input
  2. type="text"
  3. value=""
  4. class="fancy-dropdown"
  5. data-fd-options="{'jQuery': 'jquery', 'Script': 'script'}"
  6. readonly
  7. />

4.就是这样。插件会自动将输入字段转换为基于列表的选择下拉列表:

  1. <div class="fancy-dropdown-wrapper">
  2. <input type="hidden" value="0" name="fd_0" />
  3. <div class="fancy-dropdown-sleeve">
  4. <input type="text" value="" class="fancy-dropdown" readonly="" />
  5. </div>
  6. <div class="fancy-dropdown-options">
  7. <ul class="options-list" data-selected="0">
  8. <li class="option-item" data-value="0">jQuery</li>
  9. <li class="option-item" data-value="1">Script</li>
  10. <li class="option-item" data-value="2">Net</li>
  11. </ul>
  12. </div>
  13. </div>

5.自定义隐藏输入的名称值。

  1. <input
  2. type="text"
  3. value=""
  4. class="fancy-dropdown"
  5. name="custom-name"
  6. data-fd-options="['jQuery', 'Script', 'Net']"
  7. readonly
  8. />

预览截图