1. HTML 结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filtered Combo Box</title>
<link rel="stylesheet" type="text/css" href="path/to/jquery-easyui/themes/default/easyui.css">
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery-easyui/jquery.easyui.min.js"></script>
</head>
<body>
<div>
<label for="filteredCombo">选择选项：</label>
<input id="filteredCombo" />
</div>
<script>
// 在这里编写 JavaScript 代码
</script>
</body>
</html>
2. JavaScript 代码：
$(function(){
// 创建下拉框
$('#filteredCombo').combobox({
valueField: 'id',
textField: 'text',
url: 'path/to/your/data-service', // 替换为实际的数据服务接口
mode: 'remote', // 远程模式
onSelect: function(record){
// 在选择项时，触发过滤
$('#filteredCombo').combobox('grid').datagrid('load', {
filter: record.text // 过滤条件，这里使用选中项的文本
});
},
onLoadSuccess: function(){
// 在加载成功时，初始化过滤条件为空
$('#filteredCombo').combobox('setValue', '');
}
});
});
3. 数据服务接口（示例，可根据需要替换）：
假设你的数据服务接口是一个可以接收过滤条件的服务。例如，接口可能接受参数 filter 并返回相应的数据。在实际场景中，你需要根据你的后端服务的实现来修改这个接口。
// 示例：数据服务接口
app.get('/path/to/your/data-service', function(req, res){
// 获取过滤条件
var filter = req.query.filter;
// 根据过滤条件过滤数据（示例数据）
var filteredData = yourData.filter(function(item){
return item.text.indexOf(filter) !== -1;
});
// 返回过滤后的数据
res.json(filteredData);
});
确保替换实际的 EasyUI 文件路径、数据服务接口以及其他选项，以适应你的具体需求。
转载请注明出处：http://www.zyzy.cn/article/detail/13148/jQuery EasyUI