java下拉菜单选择前弹提示框_javascript实现下拉提示选择框
本文介绍了select和sugget结合起来使用的例子，支持下拉的直接选择，也支持在下拉内容中输入过滤。
整体效果就是下面这样的：
1、首先需要引入如下文件
这里要注意jquery要放在select2的前面。
2、一些实例
Document
.select2-dropdown {
margin-left: 8px !important;
margin-top: 20px !important;
}
这是单选例子
Alaska
Hawaii
请选择
California1111111111111111111111111111111111111111111111111
Nevada
Oregon
Washington
Arizona
Colorado
Idaho
Montana
Nebraska
New Mexico
North Dakota
Utah
Wyoming
Alabama
Arkansas
Illinois
Iowa
Kansas
Kentucky
Louisiana
Minnesota
Mississippi
Missouri
Oklahoma
South Dakota
Texas
Tennessee
Wisconsin
Connecticut
Delaware
Florida
Georgia
Indiana
Maine
Maryland
Massachusetts
Michigan
New Hampshire
New Jersey
New York
North Carolina
Ohio
Pennsylvania
Rhode Island
South Carolina
Vermont
Virginia
West Virginia
这是多选例子
Alaska
Hawaii
请选择
California1111111111111111111111111111111111111111111111111
Nevada
Oregon
Washington
Arizona
Colorado
Idaho
Montana
Nebraska
New Mexico
North Dakota
Utah
Wyoming
Alabama
Arkansas
Illinois
Iowa
Kansas
Kentucky
Louisiana
Minnesota
Mississippi
Missouri
Oklahoma
South Dakota
Texas
Tennessee
Wisconsin
Connecticut
Delaware
Florida
Georgia
Indiana
Maine
Maryland
Massachusetts
Michigan
New Hampshire
New Jersey
New York
North Carolina
Ohio
Pennsylvania
Rhode Island
South Carolina
Vermont
Virginia
West Virginia
这是可清除有提示例子
Alaska
Hawaii
请选择
California1111111111111111111111111111111111111111111111111
Nevada
Oregon
Washington
Arizona
Colorado
Idaho
Montana
Nebraska
New Mexico
North Dakota
Utah
Wyoming
Alabama
Arkansas
Illinois
Iowa
Kansas
Kentucky
Louisiana
Minnesota
Mississippi
Missouri
Oklahoma
South Dakota
Texas
Tennessee
Wisconsin
Connecticut
Delaware
Florida
Georgia
Indiana
Maine
Maryland
Massachusetts
Michigan
New Hampshire
New Jersey
New York
North Carolina
Ohio
Pennsylvania
Rhode Island
South Carolina
Vermont
Virginia
West Virginia
Alaska
Hawaii
请选择
California1111111111111111111111111111111111111111111111111
Nevada
Oregon
Washington
Arizona
Colorado
Idaho
Montana
Nebraska
New Mexico
North Dakota
Utah
Wyoming
Alabama
Arkansas
Illinois
Iowa
Kansas
Kentucky
Louisiana
Minnesota
Mississippi
Missouri
Oklahoma
South Dakota
Texas
Tennessee
Wisconsin
Connecticut
Delaware
Florida
Georgia
Indiana
Maine
Maryland
Massachusetts
Michigan
New Hampshire
New Jersey
New York
North Carolina
Ohio
Pennsylvania
Rhode Island
South Carolina
Vermont
Virginia
West Virginia
这是直接使用js对象初始化的例子
duplicate
$(document).ready(function() {
$(".js-example-basic-single").select2(); //单选
$(".js-example-basic-multiple").select2(); //多选
$(".js-example-placeholder-single").select2({ //允许清除
placeholder: "Select a state", //默认提示语
allowClear: true
});
$(".js-example-placeholder-multiple").select2({
placeholder: "Select a state" //默认提示语
});
var data = [{
id: 0,
text: 'enhancement'
}, {
id: 1,
text: 'bug'
}, {
id: 2,
text: 'duplicate'
}, {
id: 3,
text: 'invalid'
}, {
id: 4,
text: 'wontfix'
}];
$(".js-example-data-array").select2({
data: data
})
$(".js-example-data-array-selected").select2({
data: data
})
});
3、效果效果1
效果2
还有一些其它的内容，比如果说支持通过ajax查找来填充，支持input等，想要了解更多内容的朋友请阅读相关文章。
java下拉菜单选择前弹提示框_javascript实现下拉提示选择框相关推荐
- QQ截屏 抓级联菜单、下拉菜单及右键弹出菜单图
QQ方便的截屏功能大家都已经玩过了,又给聊天增添了不少乐趣.只要在浏览网页时发现什么值得共享的东东,单击捕捉屏幕按钮即可搞定.这对那些被QQ尾巴整怕了,看到链接就会浑身发抖的人来说,可以长舒一口气了. ...
- android 系统下拉菜单,【MotoX评测】原生Android5.0下拉菜单和基础设置_Moto X_手机评测-中关村在线...
■ 柔和的阶段性下拉菜单 受益于Android5.0的变化,新Moto X的下拉菜单采用的是浮在界面上方的下拉框,并且分为双步下拉(第一步下拉是通知中心,第二步下拉可调出快捷选项),视觉效果和操作体验 ...
- excel中通过下拉菜单显示不同的报表内容，类似下拉选项中，一旦切换内容，后面的表格内容全都不同？
EXCEL是日常办公中应用非常多的办公软件之一,其强大的数据统计.分析功能为我们的工作带来不少方便.我们可以在EXCEL中设置下拉菜单,以方便我们输入相同内容.本文就以将性别设置为下拉菜单为例,介绍具 ...
- html中按钮下拉菜单,Bootstrap3.0学习笔记之按钮与下拉菜单
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问题.不过大部分的内容我都过了一遍,并且用代码实现了一遍,而且看到了真实的效果.挺不错的.那么接下来的几篇文章主要 ...
- php ajax二级联下拉菜单,ThinkPHP和Ajax 实现二级联动的下拉菜单
这篇文章主要介绍了关于ThinkPHP和Ajax 实现二级联动的下拉菜单,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 联动菜单的数据存在数据库,可以随时通过对数据库添加删除修改改变菜 ...
- 动态二级下拉菜单html,js实现简洁大方的二级下拉菜单效果代码
本文实例讲述了js实现简洁大方的二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款简洁大方的二级下拉菜单,菜单的颜色自己根据需要重新定义吧,这里仅给大家提供一种制作二级菜单的思路,整体效 ...
- dw添加下拉菜单_怎样用dw制作导航栏下拉菜单
一.工具:dw工具 二.操作步骤: [1]打开dw软件,新建立一个新的文件. [2]点击常用,选择布局,绘制一个层. [3]再点击层,再绘制一个.可以看到,第一个层是layer1,第二个是layer2 ...
- HTML下拉菜单怎么做成横向,纯css实现横向下拉导航菜单(可做左侧类目导航)
[实例简介] [实例截图] [核心代码] 无标题文档 *{ margin:0; padding:0;}/*通用选择器样式*/ body{ font-family:"微软雅黑";}/ ...
- mysql 选择前4个_mysql从4个表中选择
不要认为GROUP BY是必需的 . 虽然如果一个孩子有2个父记录,你可能想用它来将2个父母分组到一行 - 但不确定这是否是你的要求 . 因为如果一个孩子有2个父母,那么将为该孩子返回的父母是未定义的 ...
最新文章
- swift_006（Swift的元组）
- UDP调用connect
- 宝石世界1.0游戏发布
- 为什么 HashMap 常用 String 对象作 key
- 树莓派3b安装ubuntu mate（在有显示器前提下看)
- 《局域网聊天——Android》
- 一起学习C语言：C语言基本语法(四)
- Synchronized 锁升级机制
- TensorFlow实现深度学习算法的教程汇集：代码+笔记
- 评测网站的十个指标！
- 客户档案管理，批发零售进销存收银财务一体管理软件
- 1.3 可移植性和标准
- 阿里云服务器共享型、计算型和通用型有什么区别？
- 打包jar包时文件读取和第三方jar包的问题
- BZOJ4487 [JSO12015] 染色问题 容斥原理
- 一个应用最广泛的营销分析工具
- Python pycharm一个文件夹如何变成一个model
- 计算机副教授工作,评副教授的基本条件
- 理解ROM,PROM,EPROM,EEPROM,RAM,DRAM，SRAM,FLASH是什么
- 无人机驾驶员培训学习记录（二）