I have a `Button` called "Add New Menu" in my HTML page , `onclick` i am opening the Modal which contain a form and some `<select></select>`elements.

**like this.**

```
<button class="btn btn-success" onclick="add_menu()"><i class="glyphicon glyphicon-plus"></i> Add New Menu</button>

```

**Here is my 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 you have checked i have `<select name="parent_id" id="parent_id" class="form-control">` in a form inside modal and having single option.

Now when user click on "Add New Menu" button i am calling the below function which is in Javascript.

```
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 : "<?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 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.

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 `<select>`