Измените значения раскрывающегося списка на основе выбора другого раскрывающегося списка с помощью Jexcel

Question

Я использую электронную таблицу Jexcel для каталогизации некоторых данных из опроса.

В столбце у меня есть раскрывающийся список с производителями автомобилей в качестве вариантов (Toyota, Honda ...).

В другом столбце у меня есть еще одно раскрывающееся меню с моделями автомобилей.

Как мне отфильтровать модели только от производителя, выбранного в первом раскрывающемся списке?

Структура данных выглядит примерно так:

var manufacturers = [
  { id: 1, name: 'Toyota' },
  { id: 2, name: 'Honda' }
];

var models = [
  { id: 8, manufacturer_id: 1, name: 'Corolla' },
  { id: 9, manufacturer_id: 2, name: 'Civic' }
];

Answer 1

1. задайте источники столбца.
2. укажите в свойстве filter столбца «модель» функцию, которая будет использоваться для фильтрации содержимого dropdownFilter
3. в В этой функции мы фильтруем источник, используя id, Manufacturer_id и source.filter()

Вот рабочая ручка

var manufacturers = [
  { id: 1, name: "Toyota" },
  { id: 2, name: "Honda" }
];

var models = [
  { id: 8, manufacturer_id: 1, name: "Corolla" },
  { id: 9, manufacturer_id: 2, name: "Civic" },
  { id: 10, manufacturer_id: 2, name: "Accord" }
];

var options = {
  minDimensions: [2, 5],
  columns: [
    {
      type: "dropdown",
      title: "Manufacturer",
      width: "150",
      source: manufacturers
    },
    {
      type: "dropdown",
      title: "Model",
      width: "150",
      source: models,
      // this is where the magic happens :)
      filter: dropdownFilter
    }
  ],
};


var mySpreadsheet = $("#spreadsheet").jexcel(options);


function dropdownFilter(instance, cell, c, r, source) {
  //get the manufacturer_id from the previus column
  var manufacturer_id = instance.jexcel.getValueFromCoords(c - 1, r);
  
  if (manufacturer_id !== "") {
    // if a manufacturer is selected filter source using its id
    return source.filter(function (item) {
      if (item.manufacturer_id == manufacturer_id) return true;
    })
  } else {
    //if no manufacturer is selected return an empty array
    return [];
    // or uncomment the following line to return the full source
    // return source
  }
}