首页
前端开发
Javascript
JavaScript 动态下拉框联动

JavaScript 动态下拉框联动

19 次浏览 0 条评论
rar
rar

需求：当第一个下拉框中的选项发生改变时，第二个下拉框的内容需要根据第一个下拉框的选项动态更新。

实现：

使用 JavaScript 事件监听和 AJAX 请求来实现。具体步骤如下：

  1. 为第一个下拉框添加一个 onchange 事件监听器。
  2. 在事件处理函数中，使用 AJAX 请求获取第二个下拉框的选项数据。
  3. 根据 AJAX 请求返回的数据动态更新第二个下拉框的内容。

示例代码：

const firstSelect = document.getElementById('first-select');
const secondSelect = document.getElementById('second-select');

firstSelect.addEventListener('change', () => {
  const selectedOption = firstSelect.value;

  // 使用 AJAX 请求获取第二个下拉框的选项数据
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `get-options?option=${selectedOption}`);
  xhr.onload = () => {
    // 更新第二个下拉框的内容
    const options = JSON.parse(xhr.responseText);
    secondSelect[removed] = options.map(option => ``).join('');
  };
  xhr.send();
});

优点：

  • 响应式，当第一个下拉框中的选项发生改变时，第二个下拉框的内容会自动更新。
  • 灵活，可以根据需要动态加载第二个下拉框的选项数据。
  • 易于实现，只需使用 JavaScript 和 AJAX 即可。
rar 文件大小：16KB