Question

我还在学习jQuery / json，并且在使用json数据通过jQuery构建我的DropDownList时，我正在努力弄清楚如何包含optgroups。

以下是json数据的示例：

0:
  Disabled: false
  Group:
    Disabled: false
    Name: "Property Overview"
  Selected: false
  Text: "Number of Floors"
  Value: "277"

目前，我可以使用Text和Value填充DropDownList。这是相当直接的。这是我的代码：

$(document).ready(function () {
        $("#PropertyList").on('change', function () {

            $("#Options_Question").empty();
            var id = $("#PropertyList").val();
            var url = '@Url.Action("GetPropertyTypeSpecificQuestions", "Report", new { id = "replaceToken" })';
            url = url.replace("replaceToken", id);

            $.getJSON(url, null, function (data) {
                $("#Options_Question").addQuestions(data);
            });
        });

        $.fn.addQuestions = function (data) {
            return this.each(function () {
                var list = this;
                $.each(data, function (index, questionData) {
                    var option = new Option(questionData.Text, questionData.Value);
                    list.add(option);
                });
            });
        }
    });

如何编辑我的jQuery以包含Group.Name中的值并将问题分组到各自的optgroup中？

Answer 1

我能够使用在stackoverflow周围的各个地方找到的信息来完成这项工作。这是工作jQuery：

$(document).ready(function () {
        $("#PropertyList").on('change', function () {

            $("#Options_Question").empty();
            var id = $("#PropertyList").val();
            var url = '@Url.Action("GetPropertyTypeSpecificQuestions", "Report", new { id = "replaceToken" })';
            url = url.replace("replaceToken", id);

            $.getJSON(url, null, function (data) {
                $("#Options_Question").addQuestions(data);
            });
        });

        $.fn.addQuestions = function (data) {
            var prevGroup, prevGroupName;

            $.each(data, function () {
                if (this.Group.Name == null) {
                    $("<option />").val(this.Value).text(this.Text).appendTo("#Options_Question");
                }
                else if (prevGroupName != this.Group.Name) {
                    prevGroup = $('<optgroup />').prop('label', this.Group.Name).appendTo('#Options_Question');
                }
                $("<option />").val(this.Value).text(this.Text).appendTo(prevGroup);
                prevGroupName = this.Group.Name;
            });  
        }
    });

使用jQuery使用项及其optgroup填充DropDownList

1 个答案: