@Andrey379
Web Developer

Как сделать вложенный массив js (select to select)?

Доброго времени суток
У меня есть задача, вывести данные из одного 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 + '');

})
  • Вопрос задан
  • 58 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы