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

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

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

这是我的addCategory页面（模式）

卡泰戈里
@foreach（$categories作为$category）
@endforeach

这是我的选择

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

Kategori在英国邮政

Semua Kategori

这是我的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);
        }
    });
}});

$（'.addKategori'）。单击（函数（）{
$.ajaxSetup({
标题：{
'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（'load&hellip；
'）；
modal.find（'.modal body'）.load（'{{route（“role.add.category”）}}}'，{}，function（）{
modal.find（'.ok'）.unbind（）.click（function（））{
modal.find（'.checkboxCategory:checked'）。每个（函数（）{
$（'#AllowedCategories'）.append（'+$（this.attr（'title'）+''））；
});
modal.modal（'hide'）；
});
$（'.chooseCategory'，模态）。单击（函数（）{
$（'#AllowedCategories'）.append（'+$（this.attr（'title'）+''））；
modal.modal（'hide'）；
返回false；
});
});
返回false；}）；
$（'.checkAllCategory'）。单击（函数（）{
var checked=$（this.prop（'checked'）；
$（this）.parents（'.dataTables_scrollHead'）.next（）.children（）.find（'[name^=“checkboxCategory”]'）.prop（'checked'，checked）；}）；
$（“#AllowedCategories选项”）。每个（函数（）{
如果（$（此.selected））{
var selectID=$（this.val（）；
$（'.checkboxCategory'）。每个（函数（）{
var checkID=$（this.attr（'categoryID'）；
如果（selectID==checkID）{
$（this.prop（'checked'，true）；
}
});
}});

您必须先清除select，然后再将其重新追加。 尝试添加

$（'#AllowedCategories'）.html（''在按钮中单击“确定”，然后重新附加列表

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

$（'#AllowedCategories'）.empty（）；
modal.find（'.checkboxCategory:checked'）。每个（函数（）{
$（'#AllowedCategories'）.append（'+$（this.attr（'title'）+''））；
});
您必须先清除select，然后再将其重新追加。
尝试添加
$（'#AllowedCategories'）.html（''在按钮中单击“确定”，然后重新附加列表

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

$（'#AllowedCategories'）.empty（）；
modal.find（'.checkboxCategory:checked'）。每个（函数（）{
$（'#AllowedCategories'）.append（'+$（this.attr（'title'）+''））；
});
为什么不在追加值之前检查它是否存在。很简单

modal.find('.ok').unbind().click(function(){
modal.find('.checkboxCategory:checked').each(function(){

    if($('#AllowedCategories option[value="'+$(this).attr('categoryID')+'"]').length == 0)
        $('#AllowedCategories').append('<option value="'+$(this).attr('categoryID')+'">'+$(this).attr('title')+'</option>');
});

modal.modal('hide');

modal.find（'.ok'）.unbind（）.click（function（））{
modal.find（'.checkboxCategory:checked'）。每个（函数（）{
如果（$（'#AllowedCategories选项[value=“'+$（this）.attr（'categoryID'）+'“]））.length==0）
$（'#AllowedCategories'）.append（'+$（this.attr（'title'）+''））；
});
modal.modal（'hide'）；

}))

您也可以在添加之前清除selectbox，但在添加之前选中此项将保留当前选定的索引，您为什么不在添加值之前选中它是否存在。很简单

modal.find('.ok').unbind().click(function(){
modal.find('.checkboxCategory:checked').each(function(){

    if($('#AllowedCategories option[value="'+$(this).attr('categoryID')+'"]').length == 0)
        $('#AllowedCategories').append('<option value="'+$(this).attr('categoryID')+'">'+$(this).attr('title')+'</option>');
});

modal.modal('hide');

modal.find（'.ok'）.unbind（）.click（function（））{
modal.find（'.checkboxCategory:checked'）。每个（函数（）{
如果（$（'#AllowedCategories选项[value=“'+$（this）.attr（'categoryID'）+'“]））.length==0）
$（'#AllowedCategories'）.append（'+$（this.attr（'title'）+''））；
});
modal.modal（'hide'）；

}))

您也可以在添加之前清除selectbox，但在添加之前选中此复选框将保留当前选定的索引
对不起，我忘记了。。您的代码正常工作，谢谢您的反馈。我很感激！对不起，我忘了。。您的代码正常工作，谢谢您的反馈。我很感激！