当前位置：首页 > JavaScript

js 实现级联

2026-04-06 08:11:38JavaScript

级联实现方法

在JavaScript中实现级联功能通常涉及动态更新下拉菜单选项，基于前一个下拉菜单的选择。以下是常见的实现方式：

基于事件监听的方法

为父级下拉菜单添加change事件监听器，当值变化时动态更新子级下拉菜单内容：

js 实现级联

document.getElementById('parentSelect').addEventListener('change', function() {
  const childSelect = document.getElementById('childSelect');
  childSelect.innerHTML = '';

  const selectedValue = this.value;
  if (selectedValue) {
    const options = getChildOptions(selectedValue);
    options.forEach(option => {
      childSelect.add(new Option(option.text, option.value));
    });
  }
});

function getChildOptions(parentValue) {
  // 这里可以是静态数据或AJAX请求
  const data = {
    'province1': [
      {value: 'city1', text: '城市1'},
      {value: 'city2', text: '城市2'}
    ],
    'province2': [
      {value: 'city3', text: '城市3'},
      {value: 'city4', text: '城市4'}
    ]
  };
  return data[parentValue] || [];
}

使用数据存储

对于复杂级联，可以预先加载所有数据到前端：

js 实现级联

const cascadeData = {
  'country': {
    'CN': '中国',
    'US': '美国'
  },
  'province': {
    'CN': [
      {value: 'BJ', text: '北京'},
      {value: 'SH', text: '上海'}
    ],
    'US': [
      {value: 'NY', text: '纽约'},
      {value: 'CA', text: '加州'}
    ]
  }
};

function updateCascade(triggerElement, targetElementId, dataKey) {
  const selectedValue = triggerElement.value;
  const targetElement = document.getElementById(targetElementId);
  targetElement.innerHTML = '<option value="">请选择</option>';

  if (selectedValue && cascadeData[dataKey][selectedValue]) {
    cascadeData[dataKey][selectedValue].forEach(item => {
      targetElement.add(new Option(item.text, item.value));
    });
  }
}

AJAX动态加载

对于大数据量或实时性要求高的场景，可采用异步加载：

document.getElementById('parentSelect').addEventListener('change', function() {
  const childSelect = document.getElementById('childSelect');
  childSelect.disabled = true;
  childSelect.innerHTML = '<option value="">加载中...</option>';

  fetch(`/api/child-options?parent=${this.value}`)
    .then(response => response.json())
    .then(data => {
      childSelect.innerHTML = '';
      data.forEach(item => {
        childSelect.add(new Option(item.name, item.id));
      });
      childSelect.disabled = false;
    });
});

多层级联封装

封装可复用的级联组件：

class CascadeSelect {
  constructor(config) {
    this.parent = document.getElementById(config.parentId);
    this.child = document.getElementById(config.childId);
    this.dataSource = config.dataSource;
    this.init();
  }

  init() {
    this.parent.addEventListener('change', () => this.updateChild());
    this.updateChild();
  }

  updateChild() {
    const selectedValue = this.parent.value;
    this.child.innerHTML = '';

    if (selectedValue) {
      const options = typeof this.dataSource === 'function' 
        ? this.dataSource(selectedValue) 
        : this.dataSource[selectedValue];

      options.forEach(opt => {
        this.child.add(new Option(opt.text, opt.value));
      });
    }
  }
}

// 使用示例
new CascadeSelect({
  parentId: 'country',
  childId: 'city',
  dataSource: {
    'CN': [{value: 'BJ', text: '北京'}],
    'US': [{value: 'NY', text: '纽约'}]
  }
});