Question

我正在使用以下jQuery函数来填充下拉列表。一旦用户选择了一个项目，我将所选的值存储在会话变量中，并且我能够在回发后通过隐藏字段将数据从会话变量返回到变量（selectedApp）。

问题是，在回发后，我无法将列表设置回所选项目，然后再点击提交。

如何将下拉列表中的所选项目设置为所选项目？

            var selectedApp = $('#selectedApplication').val();

            $.getJSON("/ApplicationSettings/Applications/List", function(data) {
                var items = "<option>----------- Select Application to Configure ----------</option>";
                $.each(data, function(i, application) {
                    items += "<option value='" + application.Value + "'>" + application.Text + "</option>";
                });
                $("#Applications").html(items);
            });

Answer 1

您可以将each的内部更改为：

items += "<option value='" + application.Value + "' " + (selectedApp === application.Text ? "selected" : "" ) + ">" + application.Text + "</option>";

假设selecteApp包含文本值。否则，请使用application.Value进行比较。

Answer 2

让你的ajax端点返回每个选项的选定状态吗？因为除非我遗漏了什么，否则服务器应该知道选择了哪个选项

现在看来你的JSON看起来像这样

[
    {"Value": 1, "Text": "One"}
  , {"Value": 2, "Text": "two"}
  // etc
]

只需将其修改为此

即可

[
    {"Value": 1, "Text": "One", "Selected": false}
  , {"Value": 2, "Text": "two", "Selected": true}
  // etc
]

让你的回调适当地使用该值

$.each(data, function(i, application) {
  var selected = application.Selected? ' selected' : '';
  items += "<option value='" + application.Value + "'" + selected + ">" + application.Text + "</option>";
});

Answer 3

谢谢！这就是我最终做的事情

        $.getJSON("/ApplicationSettings/Applications/List", function(data)
        {
            var items = "<option>----------- Select Application to Configure ----------</option>";
            $.each(data, function(i, application)
            {
                var selected = (application.Value == selectedApp) ? 'selected' : '';
                items += "<option value='" + application.Value + "'" + selected + ">" + application.Text + "</option>";
            });
            $("#Applications").html(items);
        });

如何使用jQuery在下拉列表中设置所选项目

3 个答案: