title: Populate Html.DropDownList with jquery or JS
body: <p>Here is what I have:</p>
  
  <pre><code>for (i = 0; i &lt; data.length; i++) {
                  $("#myDropDownLisTId").find('tbody')  
                  .append($('&lt;option&gt;').attr('value', data[i].id).attr('name', data[i].name)
                  );               
              }
  </code></pre>
  
  <p>But the dropdown list always remains the same. Why is this not working? the data variable has beautiful values.
  Also, I would like before the for loop to empty the dropdown list/ How to do it?</p>
  
  <p>Here is my drop down list in the view:</p>
  
  <pre><code>&lt;%= Html.DropDownList("myDropDownLisTId")%&gt;
  </code></pre>