Nhiều danh sách thả xuống phụ thuộc JavaScript

Giả sử rằng bạn đang thử điều này trên Excel365, tôi tin rằng bạn cần tạo các vùng riêng biệt chứa các cặp danh sách xác thực dữ liệu, như minh họa trong tệp đính kèm. Mặc dù vậy, tôi đã chọn chuyển đổi các danh sách phụ thuộc và để chúng tràn theo chiều ngang vì nó phù hợp hơn với ví dụ của tôi. Bạn sẽ thấy rằng các danh sách liên quan (mảng tràn) được chứa trong các cột J và K

Công thức xác thực dữ liệu (DV) cho "trạng thái" là

=XLOOKUP(A24,$J. $J,$K. $K)#

và có thể được kéo qua để tạo công thức DV cho "mã", "tên" và "ngày" mà không cần phải nhập chúng vào hộp danh sách DV

Để thiết lập danh sách thả xuống phụ thuộc đa cấp cực kỳ dễ dàng, với các tùy chọn đánh dấu hashtag #depend ma thuật được hiển thị (phụ thuộc) dựa trên giá trị tùy chọn gốc, bạn có thể dễ dàng tạo danh sách thả xuống xếp tầng không giới hạn ở dạng web html

Dưới đây là các bước

1. Tạo trường thả xuống bình thường
2. Tạo trường thả xuống thứ hai, chọn tùy chọn "Là trường phụ thuộc?" và chọn trường thả xuống chính phụ thuộc vào
   
3. Sử dụng thẻ bắt đầu bằng # phụ thuộc để xác định các tùy chọn phụ thuộc vào giá trị của tùy chọn gốc
   

Bức tranh toàn cảnh về cách xác định các tùy chọn cho danh sách thả xuống phụ thuộc. Quốc gia > Tiểu bang / Tỉnh > Thành phố

Ví dụ sau minh họa về cách chọn trước các mục danh sách trong nhiều tầng DropDownList

            
    Essential JS 2 DropDownList
    
    
    
    
    
    
    
    
    
    



    
LOADING....
    

        

          
        

          
        
        

          
        
    
    

Vui lòng cung cấp thêm thông tin

Vui lòng cung cấp thêm thông tin

Vui lòng cung cấp thêm thông tin

Vui lòng cung cấp thêm thông tin

Vui lòng cung cấp thêm thông tin

Vui lòng cung cấp thêm thông tin

Cảm ơn bạn đã phản hồi và nhận xét của bạn. Chúng tôi sẽ khắc phục điều này càng sớm càng tốt

đây là một cây bút với giải pháp cho vấn đề của bạn. https. // codepen. io/bút/VxJgWM

Mã HTML

và Javascript

/**
 * Helper function for creating car
 **/
function createCar(name, id) {
  return {
    name: name,
    id: id,
  };
}

/**
 * Helper function for creating model
 **/
function createModel(name, id, car) {
  return {
    name: name,
    id: id,
    car: car,
  };
}

/**
 * Helper function for creating configuration
 **/
function createConfiguration(name, id, model) {
  return {
    name: name,
    id: id,
    model: model,
  };
}

/**
 * Removes all options but the first value in a given select
 * and than selects the only remaining option
 **/
function removeOptions(select) {
  while (select.options.length > 1) {                
    select.remove(1);
  }

  select.value = "";
}

/**
 * Adds given options to a given select
 **/
function addOptions(select, options) {
  console.log(select, options)
  options.forEach(function(option) {
    select.options.add(new Option(option.name, option.id));
  });
}

/**
 * Select elements references
 **/
var carsSelect = document.getElementById('cars-select');
var modelsSelect = document.getElementById('models-select');
var configurationSelect = document.getElementById('configurations-select');

/**
 * Available cars
 **/
var cars = [
  createCar('BMW', 'bmw'),
  createCar('Volkswagen', 'volk'),
  createCar('Ford', 'ford'),
];

/**
 * Available models
 **/
var models = [
  createModel('M6', 'm6', 'bmw'),
  createModel('M5', 'm5', 'bmw'),
  createModel('Golf', 'golf', 'volk'),
  createModel('Passat', 'passat', 'volk'),
  createModel('Focus', 'focus', 'ford'),
  createModel('Mondeo', 'mondeo', 'ford'),
];

/**
 * Available configurations
 **/
var configurations = [
  createConfiguration('M6 Sedan', 'sedan', 'm6'),
  createConfiguration('M6 Coupe', 'coupe', 'm6'),
  createConfiguration('M5 Sedan', 'sedan', 'm5'),
  createConfiguration('M5 Coupe', 'coupe', 'm5'),
  createConfiguration('Golf Sedan', 'sedan', 'golf'),
  createConfiguration('Golf Coupe', 'coupe', 'golf'),
  createConfiguration('Passat Sedan', 'sedan', 'passat'),
  createConfiguration('Passat Coupe', 'coupe', 'passat'),
  createConfiguration('Focus Sedan', 'sedan', 'focus'),
  createConfiguration('Focus Coupe', 'coupe', 'focus'),
  createConfiguration('Mondeo Sedan', 'sedan', 'mondeo'),
  createConfiguration('Mondeo Coupe', 'coupe', 'mondeo'),
];

/**
 * Updates models
 **/
function updateModels() {
  var selectedCar = carsSelect.value;
  var options = models.filter(function(model) {
    return model.car === selectedCar;
  });

  removeOptions(modelsSelect);
  removeOptions(configurationSelect);
  addOptions(modelsSelect, options);
}

/**
 * Updates configurations
 */
function updateConfigurations() {
  var selectedModel = modelsSelect.value;
  var options = configurations.filter(function(configuration) {
    return configuration.model === selectedModel;
  });

  removeOptions(configurationSelect);
  addOptions(configurationSelect, options);
}

/**
 * Adds options to car select
 **/
addOptions(carsSelect, cars);

Làm thế nào để làm cho một giọt

Làm cách nào để tạo danh sách thả xuống xếp tầng trong JavaScript?

Cách thêm giọt

Thả theo tầng là gì