1:前端:
<td class="formValue">
<select id="cName" name="F_ParentId" class="form-control select2 required downList2">
<option value="0">请选择应用名</option>
</select>
<input id="newsId" name="newsId" style="display: none" type="text" class="form-control required" placeholder="" />
</td>
jquery:
$(function () {
//获取下拉框绑定的值$("#sel_menu3").bindSelect({
url: "/AppMarket/CommonFunction/GetTreeSelectCodes",
});
i = $("#newsId").val();
$('#sel_menu3').val(i).select2();
$(document).ready(function () {
$('#sel_menu3').select2();
});
})
2:后台
[HttpPost]
[HandlerAjaxOnly]
[HandlerAuthorize]
public ActionResult GetTreeSelectCodes(string name)
{
List<TreeSelectModel> list = DataLogic.GetCNameString();
var treeList = new List<TreeSelectModel>();
for (int i = 0; i < 5000; i++)
{
TreeSelectModel treeModel = new TreeSelectModel();
treeModel.text = list[i].text;
treeModel.parentId = "0";
treeList.Add(treeModel);
}
list = list.Take<TreeSelectModel>(1000).ToList();
return Content(list.TreeSelectJson());
}
其中,TreeSelectJson方法如下:
public static string TreeSelectJson(this List<TreeSelectModel> data)
{
StringBuilder sb = new StringBuilder();
sb.Append("[");
sb.Append(TreeSelectJson(data, "0", ""));
sb.Append("]");
return sb.ToString();
}
private static string TreeSelectJson(List<TreeSelectModel> data, string parentId, string blank)
{
StringBuilder sb = new StringBuilder();
var ChildNodeList = data.FindAll(t => t.parentId == parentId);
var tabline = "";
if (parentId != "0")
{
tabline = " ";
}
if (ChildNodeList.Count > 0)
{
tabline = tabline + blank;
}
foreach (TreeSelectModel entity in ChildNodeList)
{
entity.text = tabline + entity.text;
string strJson = entity.ToJson();
sb.Append(strJson);
sb.Append(TreeSelectJson(data, entity.id, tabline));
}
return sb.ToString().Replace("}{", "},{");
}
}
3:如果是动态获取数据,则是通过ajax
<script>
$(document).ready(function () {
$("#cName").select2({ placeholder: '请选择' });
$(".downList2").select2({
ajax: {
type: 'POST',
url: "/AppMarket/CommonFunction/GetTreeSelectCodes",
dataType: 'text',
delay: 250,
data: function (params) {
return {
name: params.term, // search term 请求参数
page: params.page,
};
},
processResults: function (data, params) {
params.page = params.page || 1;
return {
results: data.items,//itemList
pagination: {
more: (params.page * 2) < data.total_count
}
};
},
cache: true,
success:function(data){
if (data != null && data != "") {
for (var i = 0; i < data.length ; i++) {
//var li = '<li><a href="javascript:void()" data-value="' + data[i].id + '">' + data[i].text + '</a></li>';
$("#cName").append("<option>" + data[i].text + "</option>");
}
}
}
},
placeholder: '请选择',//默认文字提示
language: "zh-CN",
tags: true,//允许手动添加
allowClear: true,//允许清空
escapeMarkup: function (markup) { return markup; }, // 自定义格式化防止xss注入
minimumInputLength: 1,
formatResult: function formatRepo(repo) { return repo.text; }, // 函数用来渲染结果
formatSelection: function formatRepoSelection(repo) { return repo.text; } // 函数用于呈现当前的选择
});
});
</script>