Я добавляю элемент множественного выбора в идентификатор с именем append, как показано ниже.
<div id="append">
<select name="color[]" id="colorsData1" class="form-control">
<option>--Select any One--</option>
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
<option>Black</option>
</select>
<select name="color[]" id="colorsData2" class="form-control">
<option>--Select any One--</option>
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
<option>Black</option>
</select>
<select name="color[]" id="colorsData3" class="form-control">
<option>--Select any One--</option>
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
<option>Black</option>
</select>
</div>
Теперь, чтобы предотвратить дублирование данных, я хочу использовать условие, если пользователь выбирает красный цвет и как красный цвет уже был выбран ранее в colorsData1 или colorsData2, я хочу предупредить пользователя. Как проверить, соответствует ли какой-либо из выбранных параметров перед текущим выбранным параметром?
Причина использования множественного выбора, а не флажков, заключается в том, что я на самом деле делаю сайт электронной коммерции. А для управления запасами я клонирую div 
, где поставщик может загружать изображения в соответствии с выбранными цветами. Я также добавляю поле загрузки, если нет дублирования цвета. Если выбранная опция не повторяется, весь мой div будет выглядеть следующим образом. 
И причина, по которой я проверяю дублирование цветов, заключается не в том, чтобы предупредить продавца, а в том, что касается меня. Сразу после того, как поставщик делает выбор цвета, если цвет уже был выбран, прежде чем я хочу перевести свой код в другое состояние, где нет кода для добавления поля загрузки файла. Смотрите, у продавца могут быть кроссовки Nike разных размеров с одинаковыми цветами. Размеры не имеют значения при онлайн-покупках, так как они не могут сказать им, подходит ли он им, глядя на изображение. Итак, я разрешаю поставщику загружать товары одинакового цвета, но разных размеров для управления запасами. Есть кнопка с идентификатором addnew, после которой мой код jquery после нажатия этой кнопки:
$('#addnew').on('click', function(){
num = num+1;
let html = '';
html = '<div class="form-group row div"><div class="col-md-2 col-lg-2"><select name="color[]" id="colorsData'+num+'" class="form-control selectebox"><option>--Select any One--</option></select></div><div class="col-md-3 col-lg-3"><select class="select2 form-control" name="size[]" multiple="multiple" id="sizesData'+num+'"></select></div><div class="col-md-2 col-lg-2"><input type="number" placeholder="availability" name="stock" class="form-control h-100"></div><div class="col-md-2 col-lg-2"><input class="form-control h-100" value="" type="text" name="price[]" placeholder="price"></div><div class="col-md-3 col-lg-3"><input class="form-control h-100" value="" type="text" name="discount[]" placeholder="discount"></div></div>';
$('#append').append(html);
if(num == 1){
html = '<div class="form-group row image"><div class="col-md-12 col-lg-12" style="display:inherit"><a href="/vendor/filemanager/dialog.php?type=4&field_id=thumbnail'+num+'&descending=1&sort_by=date&lang=undefined&akey=061e0de5b8d667cbb7548b551420eb821075e7a6" class="btn iframe-btn btn-primary" type="button"><i class="fa fa-picture-o"></i> Choose</a><input id="thumbnail'+num+'" class="form-control h-100" value="" type="text" name="image[]"></div></div>';
$('#append').append(html);
responsive_filemanager_callback('thumbnail'+num);
} else {
var selected_color = [];
$(".selectebox").on('change',function(){ console.log(selected_color)
if(jQuery.inArray( this.value, selected_color)){
alert('duplicate color')
} else {
html = '<div class="form-group row image"><div class="col-md-12 col-lg-12" style="display:inherit"><a href="/vendor/filemanager/dialog.php?type=4&field_id=thumbnail'+num+'&descending=1&sort_by=date&lang=undefined&akey=061e0de5b8d667cbb7548b551420eb821075e7a6" class="btn iframe-btn btn-primary" type="button"><i class="fa fa-picture-o"></i> Choose</a><input id="thumbnail'+num+'" class="form-control h-100" value="" type="text" name="image[]"></div></div>';
$('#append').append(html);
responsive_filemanager_callback('thumbnail'+num);
}
selected_color.push($(this).val());
});
}
})
и следующий код HTML
<div class="page-body">
<form action="{{ route('products.store') }}" method="POST">
@csrf
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>What you're selling</h5>
</div>
<div class="card-block">
<div class="row">
<div class="col-12">
<div class="form-group row">
<div class="col-md-4 col-lg-2">
<label for="name" class="block">Product Name *</label>
</div>
<div class="col-md-8 col-lg-10">
<input name="name" type="text" class="required form-control" id="name">
</div>
</div>
<div class="form-group row">
<div class="col-md-4 col-lg-2">
<label for="slug" class="block">Product Slug *</label>
</div>
<div class="col-md-8 col-lg-10">
<input name="slug" type="text" class="required form-control" id="slug">
</div>
</div>
<div class="form-group row">
<div class="col-md-4 col-lg-2">
<label for="category-2" class="block">Category *</label>
</div>
<div class="col-md-8 col-lg-10">
<select name="category_id" id="category_id" class="requires form-control">
<option selected disabled>--Product Category--</option>
<option value="">Hair</option>
<option value="">Perfumes</option>
<option value="">Shoes</option>
</select>
</div>
</div>
<div class="form-group row">
<div class="col-md-4 col-lg-2">
<label for="brand-2" class="block">Brand *</label>
</div>
<div class="col-md-8 col-lg-10">
<select name="brand_id" id="brand_id" class="requires form-control">
<option selected disabled>--Product Brand--</option>
<option value="">Nike</option>
<option value="">Zivah</option>
<option value="">Caliber</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>General Information</h5>
</div>
<div class="card-block">
<div class="row">
<div class="col-12">
<div class="form-group row">
<div class="col-md-4 col-lg-2">
<label for="description-2" class="block">Product description *</label>
</div>
<div class="col-md-8 col-lg-10">
<textarea name="description" id="description" rows="10" class="form-control editor"></textarea>
</div>
</div>
<div class="form-group row">
<div class="col-md-4 col-lg-2">
<label for="description-2" class="block">Video URL </label>
</div>
<div class="col-md-8 col-lg-10">
<input type="url" name="video" placeholder="video url" class="form-control">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-header">
<h5>SKU Information</h5>
<br>
<span class="hint">Click on the plus button to add the SKU of the product.</span>
</div>
<div class="card-block">
<div class="row">
<div class="col-12">
<div id="append"></div>
<div class="form-group text-center">
<button type="button" class="btn btn-primary" id="addnew"><span class="icofont icofont-ui-add"></span></button>
<button type="button" class="btn btn-danger" id="delete"><span class="icofont icofont-ui-delete"></span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<input type="submit" name="submit" value="Save Changes" class="btn btn-success pull-right" id="submit">
</div>
</div>
</form>
* 1021. *