根据使用 Jexcel 选择的另一个下拉列表更改下拉列表值

Posted 2023-04-14

【中文标题】根据使用 Jexcel 选择的另一个下拉列表更改下拉列表值

【英文标题】：Change dropdown values based on a selection of another dropdown using Jexcel

【发布时间】：2020-05-07 13:24:26

【问题描述】：

我正在使用 Jexcel 电子表格对调查中的一些数据进行分类。

在一个列中，我有一个下拉列表，其中包含汽车制造商作为选项（丰田、本田...）。

在另一列中，我有另一个包含车型的下拉菜单。

如何仅从第一个下拉列表中选择的制造商中筛选模型？

数据结构类似于：

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' 
];

【问题讨论】：

我设法找到了一个干净的解决方案，如果您有任何问题，请告诉我。

【参考方案1】：

设置列来源。 将“模型”列的filter 属性指向将用于过滤内容dropdownFilter 的函数 在该函数中，我们使用 id、manufacturer_id 和 source.filter() 过滤源

Here's a Working Pen

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