案例 想深入了解的可以看看https://select2.org/
//控制器
/// <summary>
/// select获取角色
/// </summary>
/// <param name="keyWord">文本框输入的内容</param>
/// <param name="pageSize">每页几条数据</param>
/// <param name="pageIndex">当前页</param>
/// <returns></returns>
public ActionResult GetRoleJson(string keyWord, int pageSize, int pageIndex = 1)
{
List<RoleDb> roleList = RoleBll.Instance.GetRoleListAllInCache();//获取List<RoleDb>的集合
if (!string.IsNullOrEmpty(keyWord))//判断select2文本框中是否输入内容
{
roleList = roleList.Where(c => c.role_name.Contains(keyWord)).ToList();//lamda表达式进行查询
}
roleList = (from r in roleList select r).Take(pageSize * pageIndex).Skip(pageSize * (pageIndex - 1)).ToList();//分页(可选)
//封装json对象
JObject rss = new JObject(
new JProperty("total", roleList.Count),
new JProperty("results",
new JArray(
from r in roleList
select new JObject(
new JProperty("id", r.role_id)
, new JProperty("text", r.role_name)
)
)
)
);
return Content(rss.ToString());
}
//视图
<span class="li_con" >
<select id='role_id' style="60%;text-align:right;padding-left:5px" multiple='multiple'>
@foreach (var item in roleList)
{
@*<option value='@item[1]' selected='selected'>@item[0]</option>如果有需求可以直接写open*@
}
</select>
<input type='hidden' name='role_names' id='role_names_hid' value='' />
<input type='hidden' name='role_ids' id='role_id_hid' value='' />
@Html.ValidationMessageFor(c => c.role_ids)
<script>
$(document).ready(function () {
$('#role_id').select2({
language: 'zh-CN',
quietMillis: 1000,
minimumInputLength: 0,
maximumInputLength: 10,
ajax: {
url: '/RoleManager/GetRoleJson',//控制器名
dataType: 'json',//返回值类型json
delay: 1000,
data: function (params) { return { keyWord: params.term, pageIndex: params.page || 1, pageSize: 7 }; },
processResults: function (data, params) { return { results: data.results, pagination: { more: data.results.length > 0 } }; },
cache: true
}
}).on('change', function () {//改变事件时触发
$('#role_id_hid').val($('#role_id').val());//把值存到隐藏域中
$('#role_names_hid').val($("#role_id").find("option:selected").text());//把值存到隐藏域中
});
});
</script>
</span>
