datalist下拉框动态加载数据Ajax
后端controller向前端返回数据集合
前端代码实现:
<div class="appNameSelect">
<label style="
font-size: 14px;
color: #aeb7bb;
">角色</label>
<input id="appName" type="text" name="role" list="roleList" style="padding:0.5em;border-radius:10px;">
<datalist id="roleList">
<option value="">请选择</option>
</datalist>
</div>
第一种遍历:
<script>
$(document).ready(function()
{
//动态绑定数据
//执行Ajax请求
$.ajax({
type: "POST",
url: "http://localhost:8080/login/getRoleList",
async: true,
dataType: "json",
success: function (data) {
console.log(data)
//清空下拉框选项
$("#roleList").empty();
$("#roleList").append("<option value=''>请选择</option>");
if (data&& data.length> 0) {
//遍历数据
for (var i = 0; i < data.length; i++) {
var id=data[i].id
var role_Name=data[i].role_NAME
//绑定数据
var option = "<option value=" + id + ">" + role_Name + "</option>";
$("#roleList").append(option);
}
}
}
});
})
</script>
第二种遍历:
<script>
$(document).ready(function() {
$.ajax({
url: "http://localhost:8080/check/selectDepartment", // 从服务器获取数据的URL
type: 'POST',
dataType: 'json',
success: function(data) {
var select = $('#roleList');
$.each(data, function(key, value) {
select.append('<option value="' + value.id + '">' + value.role_Name + '</option>');
});
}
});
</script>
Easyui Combobox实现下拉框动态数据加载
后端controller向前端返回数据集合
前端代码实现:
<input class="easyui-combobox" id="departsList" name="department" style="width:150px" data-options="required:true" />
<script>
$(document).ready(function() {
$.post("http://localhost:8080/check/selectDepartment",function(data){//后台请求
var options=$("#departsList").combobox('options');
options.textField="department_NAME";
options.valueField="id";
console.log(data);
//加载数据
$("#departsList").combobox("loadData",data);}
,"json")
}
</script>