恐怕没有简单的解决方案可以解决您的问题。您应该考虑使用ajax更新在服务器端进行操作。客户端过滤可能需要您从studentList生成的HTML中解析数据,也可能需要将数据作为JSON格式的数组注入。在这两种情况下,您最终都会获得两倍的数据(服务器和客户端)。在客户端拥有数据只会允许您禁用某些选项值,而不能隐藏它们。因此,如果您希望在不显示某些选项的情况下进行真正的过滤,则应在服务器上过滤列表。为此,您应该将所选选项从第一个下拉列表“
byCollege”发布到后端,以便检索用于重建“ byDept”复选框的过滤后的“ uniqueDeptList”。
脚步:
1.处理“ byCollege”下拉列表的更改事件
2.将选定的选项值发布到您的servlet
3.过滤servlet中的数据,并将过滤后的数据作为POST响应返回(此示例中省略)
4.删除旧的选择选项,然后从过滤的数据中重新创建它们
$("#byCollege").change(function() { $("select option:selected").first().each(function() { // Get and convert the data for sending // Example: This variable contains the selected option-text var outdata = $(this).text(); // Send the data as an ajax POST request $.ajax({ url: "yourjsonservlet", type: 'POST', dataType: 'json', data: JSON.stringify(outdata), contentType: 'application/json', mimeType: 'application/json', success: function(data) { // Remove old select options from the DOM $('#byCollege') .find('option') .remove() .end(); // Parse data and append new select options //(omitted here; e.g. $('#byCollege').append($("<option>").attr(...)) }, error: function(data, status, er) { alert("error: " + data + " status: " + status + " er:" + er); } }); });});


