jQueryを使用してDropDownListにアイテムとそのオプトグループを埋め込む

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" 

現在、私はテキストと値で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); 
       }); 
      }); 
     } 
    });  

どのようにして、それぞれのoptgroupsにGroup.Nameやグループからの値の質問を含めるように私はjQueryを編集することができますか？

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; 
      }); 
     } 
    });