javascript - Append the options to select box only once instead of multiple times -

i have button called "add new menu" in html page , onclick opening modal contain form , <select></select>elements.

like this.

<button class="btn btn-success" onclick="add_menu()"><i class="glyphicon glyphicon-plus"></i> add new menu</button> 

here modal.

<div class="modal fade" id="modal_form" role="dialog">     <div class="modal-dialog">         <div class="modal-content">             <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-label="close"><span aria-hidden="true">&times;</span></button>                 <h3 class="modal-title">menu form</h3>             </div>             <div class="modal-body form">                 <form id="form" class="form-horizontal" name="form">                     <div class="form-body">                         <div class="form-group">                             <label class="control-label col-md-3">menu  title</label>                             <div class="col-md-9">                                 <input name="menu_title" placeholder="menu title" class="form-control" type="text">                                 <span class="help-block"></span>                             </div>                         </div>                                       <div class="form-group">                             <label class="control-label col-md-3">parent menu</label>                             <div class="col-md-9">                                 <select name="parent_id" id="parent_id" class="form-control">                                     <option value=""> -- select parent menu -- </option>                                  </select>                             </div>                         </div>                     </div>                 </form>             </div>             <div class="modal-footer">                 <button type="button" id="btnsave" onclick="save()" class="btn btn-primary">save</button>                 <button type="button" class="btn btn-danger" data-dismiss="modal">cancel</button>             </div>         </div><!-- /.modal-content -->     </div><!-- /.modal-dialog --> </div> 

if have checked have <select name="parent_id" id="parent_id" class="form-control"> in form inside modal , having single option.

now when user click on "add new menu" button calling below function in javascript.

function add_menu()     {         appendmenutitles();          $('#modal_form').modal('show'); // show bootstrap modal         $('.modal-title').text('add menu'); // set title bootstrap modal      }  function appendmenutitles(){          // ajax delete data database         $.ajax({             url : "<?php echo site_url('insoadmin/menu/getmenus')?>/",             type: "post",             datatype: "json",             success: function(data)             {                 $.each(data.menus, function(i, item) {                     //console.log(data[i].expert_name);                     $('#parent_id').append($('<option>', {                          value: data.menus[i].menu_id,                         text : data.menus[i].menu_title,                     }));                 });             },             error: function (jqxhr, textstatus, errorthrown)             {                 alert('error getting menus , please try again');             }         });      } 

here works fine, getting data through ajax problem , each time user clicks on "add new menu" button keep appending options select box, when should once only.

i dont want append each time user clicks on "add new menu" button , ya make sure each time user click on "add new button" need make ajax call compulsory, append options <select>

another possibility test if select has element.

add element if not exist in select:

  $.each(data.menus, function(i, item) {         if ($('#parent_id option[value="' + data.menus[i].menu_id + '"]').length == 0) {             $('#parent_id').append($('<option>', {                 value: data.menus[i].menu_id,                 text: data.menus[i].menu_title,             }));         }     });