javascript - 附加选项以仅选择框一次而不是多次

Question

我有一个Button在我的 HTML 页面中称为“添加新菜单”，onclick我正在打开包含表单和一些内容的模态 <select></select>元素。

像这样。

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

这是我的模态框。

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

如果您检查过，我有<select name="parent_id" id="parent_id" class="form-control">以模态内部的形式并具有单一选项。

现在，当用户单击“添加新菜单”按钮时，我将调用以下 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');
            }
        });

    }

这里一切正常，我正在通过ajax获取数据，但问题是，每次用户单击“添加新菜单”按钮时，它都会将选项附加到我的选择框，而它应该只添加一次。

我不想在每次用户单击“添加新菜单”按钮时进行附加，并且确保每次用户单击“添加新按钮”时我都需要强制执行 Ajax 调用，然后将选项附加到<select>

Answer 1

另一种可能性是测试选择是否已经有该元素。

仅当选择中不存在元素时才添加元素:

  $.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,
            }));
        }
    });