title: Adding Options to Select form-control in a custom dialog with bootbox.js in ASP.NET MVC
body: <p>currently I'm trying to display a dialog where you can delete a "shelf" when you click on a button.</p>
  
  <pre><code>&lt;button type="button" class="btn btn-default" id="deleteButton"&gt;Delete&lt;/button&gt;
  </code></pre>
  
  <p>On the bootbox.js <a href="http://bootboxjs.com/examples.html/" rel="nofollow">example page</a> they link to <a href="https://gist.github.com/nahakiole/42f66c9ca7af4b528b4f#file-bb-html-form-js/" rel="nofollow">this file</a> as a example.</p>
  
  <p>This code works for me, except I don't know how to dynamically add the options from my ASP.NET MVC Model.</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $('#deleteButton').click(function () {
              bootbox.dialog({
                  title: "Delete Shelf.",
                  message: '&lt;div class="row"&gt;  ' +
                      '&lt;div class="col-md-12"&gt; ' +
                      '&lt;form class="form-horizontal"&gt; ' +
                      '&lt;div class="form-group"&gt; ' +
                      '&lt;label class="col-md-4 control-label" for="shelfSelection"&gt;Shelf&lt;/label&gt; ' +
                      '&lt;div class="col-md-4"&gt; ' +
                      '&lt;select id="shelfSelection" id="shelfSelection" class="form-control"&gt;' +
                          '&lt;option value="one"&gt;One&lt;/option&gt;  &lt;option value="two"&gt;Two&lt;/option&gt;&lt;option value="three"&gt;Three&lt;/option&gt; ' +
                          '&lt;/select&gt; ' +
                          '&lt;span class="help-block"&gt;Select the shelf to delete.&lt;/span&gt; &lt;/div&gt; ' +
                          '&lt;/div&gt; ' +
                          '&lt;div class="form-group"&gt; ' +
                          '&lt;label class="col-md-4 control-label" for="awesomeness"&gt;Confirmation&lt;/label&gt; ' +
                          '&lt;div class="col-md-4"&gt; &lt;div class="checkbox"&gt; &lt;label for="deleteConfirmation"&gt; ' +
                          '&lt;input type="checkbox" name="deleteConfirmation" id="deleteConfirmation"&gt; ' +
                          'I confirm the deletion of the selected shelf.&lt;/label&gt; ' +
                          '&lt;/div&gt;&lt;/div&gt; &lt;/div&gt;' +
                          '&lt;/form&gt; &lt;/div&gt;  &lt;/div&gt;',
                  buttons: {
                      cancel: {
                          label: "Cancel",
                          className: "btn-default",
                      },
                      success: {
                          label: "Delete",
                          className: "btn-danger",
                          callback: function () {
                              var name = $('#name').val();
                              var answer = $("input[name='deleteConfirmation']:checked").val()
                          }
                      }
                  }
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>The Shelves are stored in a Collection:</p>
  
  <pre><code>@foreach (Shelf shelf in Model.Shelves)
  {
      string shelfName = @shelf.Name;
  }
  </code></pre>
  
  <p>Now my Question: How can I add the Shelves as "option" to the "select" element?</p>
  
  <p>Thank you!</p>