title: Repopulate select menu after adding new item
body: <p>I looked around and wasn't able to see anything that fit my needs. Basically I am trying to refresh the select menu (not the entire page) once an item is added to it. I currently have an ajax query that allows a user to add a new folder, which works perfectly. Once it is added I want that folder option to be added to the select menu. Below is my code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form&gt;
  &lt;select id="basic-combo" name="basic-combo" size="1" onchange="showFolders(this.value)"&gt;
    &lt;?php
       foreach ($folder as $t)
       {
         echo '&lt;option value="'.$t['folder_id'].'"&gt;'.$t['name'].'&lt;/option&gt;';
       }
     ?&gt;  
   &lt;/select&gt;
   &lt;/form&gt;
  
   // This is the popup form to add a new folder
   &lt;div style="float:right; margin-top:10px;"&gt;
          &lt;div class="messagepop pop"&gt;
              &lt;form method="post" id="new_folder" &gt;
                  &lt;p&gt;&lt;label for="folder"&gt;Folder Name&lt;/label&gt;&lt;input type="text" size="20" maxlength="13" name="folder_name" id="folder_name" /&gt;&lt;/p&gt;
                  &lt;p&gt;&lt;input type="submit" value="Add" id="message_submit"/&gt; or &lt;a class="close" href="/"&gt;Cancel&lt;/a&gt;&lt;/p&gt;
              &lt;/form&gt;
          &lt;/div&gt;
  
        &lt;a href="#" id="add" title="Add Folder" class="icon-plus icon-black"&gt;&lt;/a&gt;
        &lt;a href="#" title="Delete Folder" class="icon-minus icon-black"&gt;&lt;/a&gt;
        &lt;a href="#" title="Edit Folder" class="icon-folder-open icon-black" &gt;&lt;/a&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$("#message_submit").on("click", function(e){
      e.preventDefault();
        var data = $("p").find("#folder_name").val()
        console.log(data); // Testing data
  
       $.ajax({
          url: '&lt;?php echo base_url().'account/members_home/add_folder';?&gt;', 
          type: 'POST',
          data: { val: data },
          success: function(output_string){
              $(".success").text("Your folder was added!!").show().css({"color" : "green", "margin-top" : "10px"});
              $(".success").fadeOut(10000);
          }
        });
  
      deselect();
      $.ajax({
        url: '&lt;?php echo base_url().'account/members_home/getFolderID';?&gt;', 
        type: 'POST',
        data: { val1: data },
        dataType: 'json',  
        success: function(output_string){
           console.log(output_string['folder_id'][0]); // The request works
           showFolders(output_string['folder_id'][0]);
  
            // THIS IS THE PART WHERE I AM TRYING TO REPOPULATE THE SELECT MENU
           var newSelect = $('&lt;option value="' + output_string['folder_id'][0] + '" &gt;' + data + '&lt;/option&gt;');
           $('#basic-combo').append(newSelect);
           $("#basic-combo option[value='" + output_string['folder_id'][0] + "']").attr('selected', 'selected'); 
         }
      });   
  
  });
  </code></pre>