title: Creating a select class dynamically
body: <p>I'm struggling with modifying some code I have that dynamically creates a select box based on column values from a sharepoint list. </p>
  
  <p>at the moment the code:</p>
  
  <pre><code>function getAjaxFilter(name, internalName) {
  $.ajax({
      url: $().SPServices.SPGetCurrentSite() + '/_layouts/filter.aspx?ListId=' + listID + '&amp;FieldInternalName=' + internalName + '&amp;ViewId=' + viewID + '&amp;FilterOnly=1&amp;Filter=1' + filterFieldsParams,
      success: function(data) {
  
          $('#filterField' + internalName).html(name).append($("&lt;div&gt;&lt;/div&gt;").append(data).find("select"));
          //clear current onChange event
          $("#diidFilter" + internalName).attr("onchange", '');
          // add change event
          $("#diidFilter" + internalName).change(function() {
              FilterField(viewID, internalName, encodeURIComponent(this.options[this.selectedIndex].value), this.selectedIndex);
          });
      }
  </code></pre>
  
  <p>Creates the following html:</p>
  
  <pre><code>&lt;div id="filterFieldSub_Category"&gt;
  Sub Category
  &lt;select title="Filter by Sub_Category" id="diidFilterSub_Category"&gt;
      &lt;option&gt;(All)&lt;/option&gt;
      &lt;option&gt;(Empty)&lt;/option&gt;
      &lt;option value="Test"&gt;Test&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p></p>
  
  <p>What I'm trying to achieve is to get it to produce a select class so I can apply it to a 3rd party selectbox styler like bootstrap select. so It needs to look like:</p>
  
  <pre><code>&lt;select class="selectpicker" id= "filterFieldSub_Category"&gt;
  &lt;option&gt;(all)&lt;/option&gt;
  &lt;option&gt;(empty)&lt;/option&gt;
  &lt;option&gt;test&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I'm not sure where to start, so if anyone could point me in the right direction that would be a huge help :)</p>