在不使用 Ajax 或在 MVC 中提交的情况下刷新视图/部分视图

Question

我有一个包含不同类型列表的 ViewModel

当第一次加载页面时，我想根据选择的下拉列表显示数据列表。

当下拉菜单发生变化时，我想显示特定于该类型的数据列表。

但我不想去我的控制器，因为在那种情况下我需要进行搜索/查询，因为我的视图中已经有了所有类型。

我该怎么做？

任何建议。

谢谢，

Answer 1

如果您不想访问服务器（ajax\submit），那么您需要下载所有数据（在第一个响应中）并使用 javascript 更改列表。

When the select box's change occurs, you javascript will need to get the selected value and update the new list to work against it.

这是一个例子：

HTML：

<select id="s1"></select>
<select id="s2"></select>

JS：

var currData = ["1", "2", "3"];
var otherData = [
    ["a", "b", "c"],
    ["d", "e", "f"],
    ["g", "h", "i"]
]


for (var i = 0; i < currData.length; i++) {
    var option = $('<option value="' + currData[i] + '">' + currData[i] + '</option>');
    $("#s1").append(option);
}
// s1 and s2 are the same when the page loads.
$('#s2').html($('#s1').html());

$('#s1').change(function () {
    var idx = currData.indexOf($(this).val());
    var newSelectData = otherData[idx]; // change s2 due to s1's selection
    $('#s2').children().remove(); // clear the s2 select box
    for (var i = 0; i < newSelectData.length; i++) {
        var option = $('<option value="' + newSelectData[i] + '">' + newSelectData[i] + '</option>');
        $("#s2").append(option);
    }
});

JSFIDDLE.