bootstrap动态调用select下拉框的实例代码
html代码:
填报部门:
JS代码:
/*获取下拉菜单*/
function showSel(){
$.ajax({
"type" : 'get',
"url": 地址,
"dataType" : "json",
"success" : function(data) {
var depart_list = data.data;
var opts = "";
for( var depart_index = 0 ; depart_index < depart_list.length; depart_index++ ){
var depart = depart_list[depart_index];
opts += ""+显示的名称.name+"";
}
// 查询界面
$("#addid").append(opts);
$("#addid").selectpicker("refresh");
}
});
}
这样就可以了。
以上这篇bootstrap动态调用select下拉框的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。
BootStrap与Select2使用小结
这个select2组件的功能确实很强大,可以将图片放入到select里面随着文字一起显示。
组件的下载地址以及API说明地址:
1、Select2使用示例地址:https://select2.github.io/examples.html 、http://select2.github.io/select2/
2、Select2参数文档说明:https://select2.github.io/options.html
3、Select2源码:/select2/select2
效果图:
HTML代码:
@{
Layout = "~/Views/Shared/_Layout.cshtml";
}
@*
*@
$(document).ready(function () {
$("#test").select2();
//--------------------------------------
$("#test_1").select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
theme: "classic"
});
//------------------------------------------------------
$("#test_2").select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择",
minimumInputLength: 10 //最小需要输入多少个字符才进行查询
});
//-------------------------------------------------------
$("#test_3").select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择",
tags: true,
maximumSelectionLength: 2 //设置最多可以选择多少项
});
//----------------------------------------------------
$("#test_4").select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择",
allowClear: true,
tags: true,
maximumSelectionLength: 2, //设置最多可以选择多少项
templateResult: function (state) {
if (!state.id) {
return state.text;
}
console.log(state.element.getAttribute("imgPath"));
var $state = $(' ' + state.text + '');
return $state;
},
templateSelection: function (state) {
if (!state.id) return state.text; // optgroup
var $state = $(' ' + state.text + '');
return $state;
}
});
//----------------------------------------------------------
$("#test_5").select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择",
tags: true,
maximumSelectionLength: 3, //设置最多可以选择多少项
templateResult: function (state) {
if (!state.id) {
return state.text;
}
console.log(state.element.getAttribute("imgPath"));
var $state = $(' ' + state.text + '');
return $state;
},
templateSelection: function (state) {
if (!state.id) return state.text; // optgroup
var $state = $(' ' + state.text + '');
return $state;
}
}).select2('val', ['HI', 'OR', 'NV']);
//-------------------------------------------------------------------
$("#test_6").select2({
language: "zh-CN", //设置 提示语言
width: "100%", //设置下拉框的宽度
placeholder: "请选择",
tags: true,
maximumSelectionLength: 3, //设置最多可以选择多少项
templateResult: function (state) {
if (!state.id) {
return state.text;
}
console.log(state.element.getAttribute("imgPath"));
var $state = $(' ' + state.text + '');
return $state;
},
templateSelection: function (state) {
if (!state.id) return state.text; // optgroup
var $state = $(' ' + state.text + '');
return $state;
}
});
//------------------------------------------------------------------
$("#test_7").select2({
ajax: {
url: "Home/GetArea",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // search term
page: params.page
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,
pagination: {
more: (params.page * 30) < data.total_count
}
};
},
cache: true
},
escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
minimumInputLength: 1,
language: "zh-CN", //设置 提示语言
maximumSelectionLength: 3, //设置最多可以选择多少项
placeholder: "请选择",
tags: false, //设置必须存在的选项 才能选中
templateResult: function (repo) { //搜索到结果返回后执行,可以控制下拉选项的样式
console.log("====================templateResult开始==================");
console.log(repo);
console.log("====================templateResult结束==================");
if (repo.loading) return repo.text;
var markup = "
" + repo.text + "";
return markup;
},
templateSelection: function (repo) { //选中某一个选项是执行
console.log("------------------templateSelection开始-------------------------------------");
console.log( repo);
console.log("------------------templateSelection结束-------------------------------------");
return repo.full_name || repo.text;
}
});
$("#btn").click(function() {
alert($("#test_4").select2("val"));
});
//$("#test_5").prop("disabled", true); //设置是否可用
});
默认
Alaska
Hawaii
California
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
----------------------------------------------------
1、可搜索选项
Alaska
Hawaii
California
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
================================
2、可搜索选项(有搜索关键字控制)
Alaska
Hawaii
California
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
===============================
3、多选
Alaska
Hawaii
California
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
===============================
4、图文选项
Alaska
Hawaii
California
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
======================================
5、默认选中某个选项
Alaska
Hawaii
California
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
=========================================
6、某些选项不能选中
Alaska
Hawaii
California
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
======================================
7、搜索动态加载下拉选项功能(即在用户输入搜索内容时动态去后台取数据)
=========================================
获取选中的值
控制器action代码:
public class HomeController : Controller
{
public IEnumerable areaList = new List()
{
"北京市",
"天津市",
"重庆市",
"上海市",
"广州市",
"长沙",
"哈尔滨",
"长春",
"杭州市",
"南京市",
"福建市",
"河北省",
"山西省",
"辽宁省",
"吉林省",
"黑龙江省",
"江苏省",
"浙江省",
"安徽省",
"福建省",
"江西省",
"山东省",
"河南省",
"湖北省",
"湖南省",
"广东省",
"海南省",
"四川省",
"贵州省",
"云南省",
"陕西省",
"甘肃省",
"青海省",
"台湾省",
"内蒙古自治区",
"广西壮族自治区",
"西藏自治区",
"宁夏回族自治区",
"新疆维吾尔自治区",
"香港特别行政区",
"澳门特别行政区"
};
public JsonResult GetArea(string q, string page)
{
var area = new { id = 1, name = "" };
var lstRes = areaList.Select((t, i) => new Area
{
id = i,
text = t,
element = "element" + i
});
if (!string.IsNullOrEmpty(q.Trim()))
{
lstRes = lstRes.Where(x => x.text.Contains(q));
}
var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take(10) : lstRes.Skip(Convert.ToInt32(page) * 10 - 10).Take(10);
return Json(new { items = lstCurPageRes, total_count = lstRes.Count() }, JsonRequestBehavior.AllowGet);
}
public ActionResult Index()
{
return View();
}
}
namespace Select2Demo.Models
{
public class Area
{
public int id { get; set; }
public string text { get; set; }
public string element { get; set; }
}
}
以上所述是小编给大家介绍的BootStrap与Select2使用小结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!
以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。