问如何在动态添加的表行中创建级联下拉列表并保存到数据库中

EN

 //To populate data in second dropdown list
 public ActionResult GetPSESubcategories(Guid pse_category_id)
    {
        List<SelectListItem> subCategories = new List<SelectListItem>();
        var subCategoryList = PopulateDropdown.GetPSESubcategory(pse_category_id);
        return Json(subCategoryList, JsonRequestBehavior.AllowGet);
    }

<div class="row" style="display:none;" id="patientExperienceDiv">
    <div class="table-responsive" style="padding-left:8px !important;">
        <table class="table">
            <thead>
               <tr>
                 <th style="border-bottom:none !important;border-top:none !important;">
                    <text style="font-weight:500 !important;"><strong>II.</strong>&nbsp;Categories</text><br />
                    <text style="font-size:12px;color:#a5a5a5;font-weight:400 !important;">Please select.</text>
                 </th>
                 <th style="border-bottom:none !important;border-top:none !important;">
                    <text style="font-weight:500 !important">Subcategories</text><br />
                    <text style="font-size:12px;color:#a5a5a5;font-weight:400 !important;">Please select.</text>
                 </th>
                 <th style="border-bottom:none !important;border-top:none !important;"></th>
                 <th style="border-bottom:none !important;border-top:none !important;"></th>
                 <th style="border-bottom:none !important;border-top:none !important;"></th>
               </tr>
             </thead>
             <tbody id="multipleCategoryTbl">
               <tr>
                 <td style="border-bottom:none !important;border-top:none !important;">
                     <div style="padding-top:2px">                                                            
                        @Html.DropDownListFor(a => a.addedCategory, new SelectList(ViewBag.PSECategories, "Value", "Text"), "Select Category", new { @class = "form-control", @id ="cat" })
                      </div>
                  </td>
                  <td style="border-bottom:none !important;border-top:none !important;">
                     <div style="padding-top:2px;">
                        @Html.DropDownListFor(a => a.addedSubcategory, new SelectList(ViewBag.PSESubcategories, "Value", "Text"), "Select Subcategory", new { @class = "form-control field", @disabled = "disabled", @id = "sub" })
                        @Html.EditorFor(a => a.addedSubcategory, new { htmlAttributes = new { @class = "form-control field", @readonly = "readonly", @id = "nature", @style = "display:none;" } })
                      </div>
                   </td>
                   <td style="border-bottom:none !important;border-top:none !important;">
                       <button type="button" class="form-control btn btn-default btn-sm" id="addNewCategoryBtn" style="text-align:center !important;">
                       <i class="fa fa-plus"></i>
                       </button>
                   </td>
                   <td style="border-bottom:none !important;border-top:none !important;">
                       <button type="button" class="form-control btn btn-default btn-sm" id="removeNewCategoryBtn" onclick="remove_row('multipleCategoryTbl')" style="text-align:center !important;">
                       <i class="fa fa-remove"></i>
                       </button>
                    </td>
                    <td style="border-bottom:none !important;border-top:none !important;"><input type="text" class="form-control" id="textId" name="ids" value="0" /></td>
                </tr>
             </tbody>
          </table>
</div>

<script>
   $(function () {
       $('#cat').change(function () {
           getSelectedItem(this, null);
       });

       $('#addNewCategoryBtn').click(function () {
           addRow('multipleCategoryTbl');
       });

       //sample hard-coded values that must be replaced by javascript on cascading dropdown list values from database
       var jsonObj = { "category1": ["subcat 1"], "category2": ["subcat 2.1", "subcat 2.2"], "category3": ["subcat 3.1", "subcat 3.2", "subcat 3.3"] };
       var keys = Object.keys(jsonObj);

       var category_dropdown = document.getElementById("cat");

       var getSelectedItem = function (element, row) {
           $("#sub").prop("disabled", false);

           var e = element;
           var selectedCategory = e.options[e.selectedIndex].value;
           alert(selectedCategory);    //selected value in the first dropdown list

           var sub_category_dropdown = (row != null ? row.getElementsByTagName("select")[1] : document.getElementById("sub"));

          alert(sub_category_dropdown.nodeValue); //check the values of second dropdown list

          sub_category_dropdown.options.length = 0;

          for (var i = 0; i < jsonObj[selectedCategory].length; i++) {                                                
             sub_category_dropdown[sub_category_dropdown.length] = new Option(jsonObj[selectedCategory][i], jsonObj[selectedCategory][i]);
          }
        };

        //to dynamically add table rows
        var addRow = function (tableID) {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[0].cells.length;

        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;

            newcell.childNodes[0].selectedIndex = 0;
        }
        var selects = row.getElementsByTagName("select");
        selects[0].addEventListener('change', function () { getSelectedItem(this, row) }, false);
        };

        //this must be the place where the values of second dropdown is populated
        for (var keys in jsonObj) {                                     
        category_dropdown[category_dropdown.length] = new Option(keys, keys);
        }
   });

$("#cat").on('change', function () {
        alert($(this).val());

        $("#sub").prop("disabled", false);
        $("#sub").empty();
        $.ajax({
            type: 'POST',
            url: '@Url.Action("GetPSESubcategories", "PSERegistry")',
            dataType: 'json',
            data: { pse_category_id: $(this).val() },
            success: function (subCategories) {
                $("#sub").append($('<option></option>').val('').text('Select Subcategory'));
                $.each(subCategories, function (i, sub) {
                    $("#sub").append('<option value ="' + sub.Value + '">' + sub.Text + '</option>');
                });

                //Update the data in subcategory dropdown upon selection of category
                $("#sub").trigger("chosen:updated");
                $("#sub").trigger("liszt:updated");
            },
            error: function () {
                alert('Please select Category.');
            }
        });
        return false;
    });

<script>

    $('#cat').change(function () {
        alert('test');
        getSelectedItem(this, null);
    });

    var category_dropdown = document.getElementById("cat");

    function getSelectedItem(element, row) {
        $("#sub").prop('disabled', false);
        $("#sub").empty();                                   

        var e = element;
        var selectedCategory = e.options[e.selectedIndex].value;
        alert(selectedCategory);

        $.ajax({
             type: 'POST',
             url: '@Url.Action("GetPSESubcategories", "PSERegistry")',
             dataType: 'json',
             data: { pse_category_id: selectedCategory },
             success: function (subCategories) {

                 var sub_category_dropdown = (row != null ? row.getElementsByTagName("select")[1] : document.getElementById("sub"));
                 sub_category_dropdown.options.length = 0;

                 $("#sub").append($('<option></option>').val('').text('Select Subcategory'));
                 $.each(subCategories, function (i, sub) {

                 sub_category_dropdown[sub_category_dropdown.length] = new Option(sub.Text, sub.Value);
                                                //alert(sub.Value);
                 });
              },
              error: function () {
                 alert('Please select Category.');
              }
           });
         };

         function addRow(table_id) {
            alert('new row added');

            var table = document.getElementById(table_id);

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var colCount = table.rows[0].cells.length;
            alert(rowCount);

            for (var i = 0; i < colCount; i++) {

                var newcell = row.insertCell(i);

                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.innerHTML);
                //alert(newcell.childNodes[0].type);

                switch (newcell.childNodes[0].type) {
                    case "text":
                        newcell.childNodes[0].value = rowCount;
                    case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                    case "select":
                        newcell.childNodes[0].selectedIndex = 0;
                        break;
                }
             }

             var selects = row.getElementsByTagName("select");
             selects[0].addEventListener('change', function () {
                 alert('clicked');
                 getSelectedItem(this, row)
             }, false);
          }