Доброго времени суток
У меня есть задача, вывести данные из одного select > option в другой
select > option
. То есть есть карточки товаров на пример с выбором цвета. В
option
задаются два значения
value
на английском и
text
на русском. Как сделать вложенный массив чтобы можно было передавать два значения в одном массиве? Ну и выводить так же в
option
два значения.
Сразу прошу прощения за некрасивое название переменных и возможно плохой код =)
<select class="filter filter-items_type">
</select>
<select class="filter filter-items_color">
</select>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="c-item" data-type="">
<div class="card-product-body">
<div class="card-product-item">
<form>
<select class="types">
<option class="card_item_type" value="eco">Эконом</option>
<option class="card_item_type" value="standart">Стандарт</option>
<option class="card_item_type" value="premium">Премиум</option>
</select>
<select class="colors">
<option class="card_item_color" value="white">Белый</option>
<option class="card_item_color" value="black">Черный</option>
<option class="card_item_color" value="yellow">Желтый</option>
</select>
</form>
<div class="set-type"></div>
<div class="set-color"></div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="c-item" data-type="">
<div class="card-product-body">
<div class="card-product-item">
<form>
<select class="types">
<option class="card_item_type" value="eco">Сублимация</option>
<option class="card_item_type" value="standart">Деколи</option>
</select>
<select class="colors">
<option class="card_item_color" value="red">Красный</option>
<option class="card_item_color" value="violet">Фиолетовый</option>
<option class="card_item_color" value="gray">Серый</option>
</select>
</form>
<div class="set-type"></div>
<div class="set-color"></div>
</div>
</div>
</div>
</div>
</div>
</div>
$('.c-item').each(function() {
var inp_color_text = $(document).find(".card_item_color").text();
// Объявляем переменные для цвета
var inp_color = $(document).find('.card_item_color'),
t_c_inp = $(this).find('.card_item_color'),
mas_color = [],
t_c_mas = [],
uniq_color = [],
inp_color_v = [];
// Объявляем переменные для типа
var inp_type = $(document).find('.card_item_type'),
t_t_inp = $(this).find('.card_item_type'),
mas_type = [],
t_t_mas = [],
uniq_type = [],
inp_type_v = [];
function save() {
// Все цвета
for (var i = 0; i < inp_color.length; i++) {
mas_color[i] = inp_color[i].value;
}
// Локальный цвет
for (var i = 0; i < t_c_inp.length; i++) {
t_c_mas[i] = t_c_inp[i].value;
}
// Локальный тип
for (var i = 0; i < inp_type.length; i++) {
mas_type[i] = inp_type[i].value;
}
// Локальный тип
for (var i = 0; i < t_t_inp.length; i++) {
t_t_mas[i] = t_t_inp[i].value;
}
uniq_type = mas_type.filter(function(item, pos) {
return mas_type.indexOf(item) == pos;
})
uniq_color = mas_color.filter(function(item, pos) {
return mas_color.indexOf(item) == pos;
})
// Выведем в консоль
console.log(t_c_mas, t_t_mas, uniq_type, uniq_color);
}
save();
let str_color = ' ';
let str_type = ' ';
for (var i = 0; i < uniq_color.length; i++ ) {
if (uniq_color[i] !== undefined) str_color += '<option value="' + uniq_color[i] +'">' + uniq_color[i] + '</option>';
}
for (var i = 0; i < uniq_type.length; i++) {
if (uniq_type[i] !== undefined) str_type += '<option value="' + uniq_type[i] +'">' + uniq_type[i] + '</option>';
}
$('.filter-items_color').html( '<option value="Выберите цвет">Выберите цвет</option>' + str_color);
$('.filter-items_type').html( '<option value="Выберите тип">Выберите тип</option>' + str_type);
$(this).closest('.c-item').attr('data-type', t_t_mas)
$(this).closest('.c-item').addClass(t_c_mas);
$(this).find('.set-color').html(t_c_mas + '');
$(this).closest('.c-item').addClass(t_t_mas);
$(this).find('.set-type').html(t_t_mas + '');
})