title: Append the options to select box only once instead of multiple times
body: <p>I have a <code>Button</code> called "Add New Menu" in my HTML page , <code>onclick</code> i am opening the Modal which contain a form and some <code>&lt;select&gt;&lt;/select&gt;</code>elements.</p>
  
  <p><strong>like this.</strong></p>
  
  <pre><code>&lt;button class="btn btn-success" onclick="add_menu()"&gt;&lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; Add New Menu&lt;/button&gt;
  </code></pre>
  
  <p><strong>Here is my Modal.</strong></p>
  
  <pre><code>&lt;div class="modal fade" id="modal_form" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                  &lt;h3 class="modal-title"&gt;Menu Form&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body form"&gt;
                  &lt;form id="form" class="form-horizontal" name="form"&gt;
                      &lt;div class="form-body"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label col-md-3"&gt;Menu  Title&lt;/label&gt;
                              &lt;div class="col-md-9"&gt;
                                  &lt;input name="menu_title" placeholder="Menu Title" class="form-control" type="text"&gt;
                                  &lt;span class="help-block"&gt;&lt;/span&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;              
                          &lt;div class="form-group"&gt;
                              &lt;label class="control-label col-md-3"&gt;Parent Menu&lt;/label&gt;
                              &lt;div class="col-md-9"&gt;
                                  &lt;select name="parent_id" id="parent_id" class="form-control"&gt;
                                      &lt;option value=""&gt; -- Select Parent Menu -- &lt;/option&gt;
  
                                  &lt;/select&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" id="btnSave" onclick="save()" class="btn btn-primary"&gt;Save&lt;/button&gt;
                  &lt;button type="button" class="btn btn-danger" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If you have checked i have <code>&lt;select name="parent_id" id="parent_id" class="form-control"&gt;</code> in a form inside modal and having single option.</p>
  
  <p>Now when user click on "Add New Menu" button  i am calling the below function which is in Javascript.</p>
  
  <pre><code>function add_menu()
      {
          AppendMenuTitles();
  
          $('#modal_form').modal('show'); // show bootstrap modal
          $('.modal-title').text('Add Menu'); // Set Title to Bootstrap modal 
      }
  
  function AppendMenuTitles(){
  
          // ajax delete data to database
          $.ajax({
              url : "&lt;?php echo site_url('insoadmin/menu/getMenus')?&gt;/",
              type: "POST",
              dataType: "JSON",
              success: function(data)
              {
                  $.each(data.menus, function(i, item) {
                      //console.log(data[i].expert_name);
                      $('#parent_id').append($('&lt;option&gt;', { 
                          value: data.menus[i].menu_id,
                          text : data.menus[i].menu_title,
                      }));
                  });
              },
              error: function (jqXHR, textStatus, errorThrown)
              {
                  alert('Error getting Menus , Please try again');
              }
          });
  
      }
  </code></pre>
  
  <p>here everything works fine, i am getting data through an ajax but the problem is , each time user clicks on the "Add New Menu" button it keep appending the options to my select box, when it should be once only.</p>
  
  <p>I dont want to append each time user clicks on the "Add new Menu" button and ya make sure each time user click on the "Add new button" i need to make an Ajax call for compulsory, then append options to the <code>&lt;select&gt;</code> </p>