本文介绍了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等,想要了解更多内容的朋友请阅读相关文章。