当前位置:首页 > 站长推荐 > JS/jQuery 实现Combobox可输可选下拉框(select)

JS/jQuery 实现Combobox可输可选下拉框(select)

当我们在做html网页的时候,往往需要实现一些可输可选的select下拉框,这种下拉框往往比较复杂,如果自己单纯写这样一个下拉框是比较耗费时间的,特别对于敏捷开发项目来说是很不划算的,殊不知大神们已经为我们写好了这样的可输可选的select下拉框插件,小编极力推荐使用一款叫做MagicSuggest的插件。
MagicSuggest Combobox 可输入可选下拉框示例
之所以推荐这款插件原因有二:
一、这是一款为MIT License的开源免费jQuery Combobox插件。中国人习惯用免费的盗版或者破解版软件,这对软件作者是极其不尊重的,好在这款插件是完全免费的,你可以任意修改使用,并运用到商业中去。
二、这款Combobox 可输可选的jQuery插件功能强大,几乎能满足所有开发者的需求。

MagicSuggest Combobox可输可选下拉框jQuery插件使用方法

前提条件:引入Bootstrap 3jQuery 1.8
1、下载插件
点击此处下载

2、将下载的插件解压,引入库到你的代码中

1
2
<link href="assets/magicsuggest/magicsuggest-min.css" rel="stylesheet">
<script src="assets/magicsuggest/magicsuggest-min.js"></script>

如示例将magicsuggest-min.css和magicsuggest-min.js文件引入到你的代码中去

3、创建一个COM元素作为可输可选Combobox下拉框的容器

1
<div id="magicsuggest"></div>

4、最后需要添加一段Javascript执行代码

1
2
3
4
5
$(function() {
    $('#magicsuggest').magicSuggest({
        [...] // configuration options
    });
});

其中的Configuration options可以实现多种配置功能,比如可以这样写

1
2
3
4
$('#ms-allowFreeEntries').magicSuggest({
  allowFreeEntries: false,
  data: ['Paris', 'New York', 'Gotham']
});

关于MagicSuggest的更多配置可以参考MagicSuggest 官网

可以实现通过Ajax动态加载可输可选下拉框的选项,可以在下拉框中输入一个新值动态添加一个数据选项,同样可以实现可输可选下拉框多选。

这款可输可选下拉框jQuery插件的强大之处就在于:

  1. 它实现了动态配置实现多个功能
  2. 提供了多种操作可输可选下拉框的方法
  3. 提供了监听可输可选下拉框的动作事件

MagicSuggest 是一款强大的可输可选Combobox下拉框插件,感谢作者的免费提供。


有任何问题,可以给我留言,我会在第一时间为大家解答,谢谢!
  • << Google 被“墙”后也能使用IP访问
  • jQuery 实现的多功能Tree/TreeView “树... >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/jquery-combobox-select/

    相关文章 近期热评 最新文章

    • JS&jQuery实现全球国家、州/省、城市select下拉框选择示例
      当我们填写用户地址的时候,需要填写用户的地址,对于全球的用户我们不能让用户任意输入地址,需要的是让用户选择地址,而不是填写。但是全球的国家众多,每个国家的州/...
    • JQuery 获取浏览器窗口的高度和宽度讲解
      在我们使用JQuery开发的过程中我们有时会根据浏览器窗口的位置定位,本文讲解一下获取浏览器窗口尺寸、文档尺寸、以及浏览器滚动条尺寸的一些方法。
    • HTML+JS+CSS 实现Tab选项卡
      在网页特效中经常需要使用到Tab选项卡的特效,实现这种特效需要使用HTML、CSS、JS的综合运用。实现Tab选项卡介绍了使用jQuery UI和自定义实现HTML Tab 选项卡的两种方法。
    • jQuery 实现的多功能Tree/TreeView “树插件”— zTree
      zTree 是一个依靠 jQuery 实现的 Tree/TreeView 熟悉插件, zTree 最大优点是具有灵活的配置、优异的性能、多种功能的组合。本文详细介绍了通过zTree实现jQuery设置Tree...
    • HTML&jQuery横向循环左右滚动导航方法讲解
      HTML&jQuery横向循环左右滚动导航方法讲解,实现了基于jquery可配置循环左右滚动例子讲解,可以实现横向滚屏,左右移动,适合做滚动导航。
    • jQuery 国家语言(Language)选择切换讲解
      现在网站不仅是做的国内的,更多的大企业或者是做外贸电子商务的网站都需要面向国际化,因此就涉及到语言的选择,多语言网站建的切换应该怎么设计呢?这里给你一款jQuer...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。