Question

我有一个“addCategory”模式，在我的模态中，我有许多带复选框的类别列表..

当我检查类别时，按“确定”按钮，该值将显示在我的选择选项中问题是当我再次打开模态并再次使用相同的值/名称检查类别时，该值将在我的选择选项中显示两次。所以，我将获得具有相同值/名称的双重类别。如何避免这种情况？

这是我的addCategory页面（模态）

<div class="right_col" role="main">
<div class="row">
  <div class="col-md-12 col-sm-12 col-xs-12">
    <div class="x_panel">
        <div class="x_content">                    
          <table id="datatable" class="table table-striped table-bordered">
              <thead>
                <tr>
                  <th>
                    <input type="checkbox" class="checkAllCategory">Kategori
                  </th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
                @foreach($categories as $category)
                  <tr>
                    <td>
                        <input type="checkbox" name="checkboxCategory[]" categoryID="{{$category->id}}" title="{{$category->CategoryName}}" class="checkboxCategory">
                        <a href="{{route('category.edit', $category->id)}}">{{ $category->CategoryName }}</a>
                    </td>
                    <td class="center">
                      <a href="#" categoryID="{{$category->id}}" title="{{$category->CategoryName}}" class="chooseCategory">Pilih</a>
                    </td>
                  </tr>
                @endforeach
            </tbody>
          </table>
        </div>
    </div>
  </div>
</div>

这是我的选择选项

<span>Kategori yang diizinkan untuk post</span>
      <p>
        <input type="checkbox" name="IsAllCategory" value="1" id="IsAllCategory">
        <label for="IsAllCategory">Semua Kategori</label>
      </p>
      <div id="AllowedCatContent"> 
        <select multiple="" id="AllowedCategories" name="AllowedPostCategories[]" style="width: 500px; height: 200px; float: left"> 
        </select> 
        <a href="#" class="addKategori ui btn btn-default" style="margin: 3px 4px;">Tambah kategori</a>
        <br> 
        <a href="#" class="deleteUrl ui btn btn-danger" style="margin: 3px 4px;">Hapus</a> 
      </div>

这是我的jquery

$('.addKategori').click(function(){
$.ajaxSetup({
  headers: {
      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});
var modal = $('#mymodal').modal();
modal.find('.modal-title').html('Tambah kategori');
modal.find('.modal-body').html('<p>Loading&hellip;</p>');
modal.find('.modal-body').load('{{route("role.add.category")}}',{},function(){

  modal.find('.ok').unbind().click(function(){
    modal.find('.checkboxCategory:checked').each(function(){
      $('#AllowedCategories').append('<option value="'+$(this).attr('categoryID')+'">'+$(this).attr('title')+'</option>');
    });
    modal.modal('hide');
  });

  $('.chooseCategory',modal).click(function(){
    $('#AllowedCategories').append('<option value="'+$(this).attr('categoryID')+'">'+$(this).attr('title')+'</option>');
    modal.modal('hide');
    return false;
  });



});
return false;});

$('.checkAllCategory').click(function(){
var checked = $(this).prop('checked');
$(this).parents('.dataTables_scrollHead').next().children().find('[name^="checkboxCategory"]').prop('checked', checked);});



$('#AllowedCategories option').each(function(){
if($(this.selected)){
    var selectID = $(this).val();
    $('.checkboxCategory').each(function(){
        var checkID = $(this).attr('categoryID');
        if(selectID == checkID){
            $(this).prop('checked', true);
        }
    });
}});

Answer 1

您必须先清除选择，然后再将其重新附加。尝试在按钮确定单击中添加$('#AllowedCategories').html('');，然后重新附加列表。

 $('#AllowedCategories').empty();
    modal.find('.checkboxCategory:checked').each(function(){
              $('#AllowedCategories').append('<option value="'+$(this).attr('categoryID')+'">'+$(this).attr('title')+'</option>');
            });

Answer 2

为什么不在附加值之前检查它是否存在。简单

keyboardType

}）;

您还可以在添加之前清除选择框，但在添加之前检查，这将保持当前选定的索引

如何将复选框中的值替换为选择选项

2 个答案: