Question

我的HTML页面中有一个名为“添加新菜单”的Button 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获取数据，但问题是，每当用户点击“添加新菜单”按钮时，它会继续将选项附加到我的选择框，当它应该只有一次。< / p>

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

Answer 1

success: function(data){
    $('#parent_id').html('')
    $.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,
        }));
    });
},

把$（'＃parent_id'）。html（''），这将删除旧的html

Answer 2

另一种可能性是测试select是否已经是元素。

只有在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,
            }));
        }
    });

Answer 3

在将代码附加到它之前，您应该使#parent_id为空。所以使用它。

$('#parent_id').html('')

如果您在选择框中有任何预定义值。请在预定义选项中添加一些类。

 <select name="parent_id" id="parent_id" class="form-control">
                                    <option class="predefined" value=""> -- Select Parent Menu -- </option>

并使用jQuery删除其余选项。

$('#parent_id option:not(".predefined")').remove();

将选项附加到仅选择框一次而不是多次

3 个答案: