select2远程数据及回显示例
<!DOCTYPE html>
<html>
<head>
<title>Select2远程数据及回显示例</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
</head>
<body>
<select id="mySelect" style="width: 200px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>
<script>
$(document).ready(function() {
$('#mySelect').select2({
placeholder: '请选择',
allowClear: true,
ajax: {
url: 'https://api.example.com/data',
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term, // 查询参数
};
},
processResults: function (data) {
return {
results: data.items
};
},
cache: true
}
});
// 回显数据
$('#mySelect').val(2).trigger('change'); // 设置Select2控件的值为2并触发change事件
});
</script>
</body>
</html>这个例子展示了如何使用Select2插件进行远程数据加载，并在页面加载完成后通过.val()方法进行回显。代码中的url应该替换为你的实际数据接口。
评论已关闭