title: Asp.net Core MVC Dynamically add Select List via JS
body: <p>I am trying to provide a view where people will be able to create a list of categories and sub categories. Therefore I need to allow users to dynamically add Rows.
  Each Row will allow user to add a category and then if they wish a Sub Category. For the first row I am able to use <strong>asp-items</strong> attributes to bind to a <strong>SelectList</strong> in my <strong>ViewBag</strong>, however when I add a new row via JS I cannot do it, I have tried 2 methods JS (both shown in the code):</p>
  
  <ul>
  <li>1 - Storing the SelectList in a variable and looping through it</li>
  <li>2 - Setting the asp-items to the SelectList </li>
  </ul>
  
  <p>Does anyone know how I can populate my newly added rows? Also how would I bind the enetred in data to my Model; would it have to be done in the controller?<br/>
  <br/>
  The code is as follows: <br/></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var categories = "@ViewBag.Categories";
          var catOptions = '';
          for (var i = 0; i &lt; categories; i++) {
              catOptions = catOptions + '&lt;option value="' + categories[i].CategoryId + '"&gt;' + categories[i].Name + '&lt;/option&gt;'
          }
  
          $(document).on("click", "#btnAddCat", function () {
              var newCat =''+
                  '&lt;tr class="categorieRows"&gt;' +
                      '&lt;td colspan="2"&gt;' +
                  '&lt;select&gt;' +
                      catOptions +
                  '&lt;/select&gt;' +
                      '&lt;/td&gt;' +
                      '&lt;td&gt;' +
                          '&lt;button type="button" id="btnAddSubCat" class="btn btn-xs btn-primary classAdd"&gt;Add Sub Category&lt;/button&gt;' +
                      '&lt;/td&gt;' +
                  '&lt;/tr&gt;';
              $('#categoryTable').append(newCat);
          });
  
          $(document).on("click", "#btnAddSubCat", function () {
              var newSubCat = '' +
                  '&lt;tr class="categorieRows"&gt;' +
                      '&lt;td&gt;&lt;/td&gt;' +
                      '&lt;td&gt;' +
                          '&lt;select asp-items="ViewBag.SubCategories"&gt;&lt;/select&gt;' +
                      '&lt;/td&gt;' +
                      '&lt;td&gt;&lt;/td&gt;' +
                  '&lt;/tr&gt;';
              $('#categoryTable').append(newSubCat);
          });
      });
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@model IEnumerable&lt;Categories&gt;
  
  @{
      ViewData["Title"] = "Create";
  }
  
  &lt;h2&gt;Create&lt;/h2&gt;
  
  &lt;h4&gt;Surveys&lt;/h4&gt;
  &lt;hr /&gt;
  &lt;table class="table table-striped" id="categoryTable"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  Category
              &lt;/th&gt;
              &lt;th&gt;
                  Sub Categories
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;button type="button" id="btnAddCat" class="btn btn-xs btn-primary classAdd"&gt;Add Category&lt;/button&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="categorieRows"&gt;
              &lt;td colspan="2"&gt;
                  &lt;select asp-items="ViewBag.Categories"&gt;&lt;/select&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;button type="button" id="btnAddSubCat" class="btn btn-xs btn-primary classAdd"&gt;Add Sub Category&lt;/button&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;div&gt;
      &lt;a asp-action="Index"&gt;Back to List&lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>