js写一个三级联动分类

以下是一个简单的三级联动分类的JS代码示例：

<!-- HTML代码 -->
<select id="category1" onchange="onCategory1Change()">
  <option value="">请选择分类1</option>
  <option value="1">分类1</option>
  <option value="2">分类2</option>
  <option value="3">分类3</option>
</select>
<select id="category2" onchange="onCategory2Change()" disabled>
  <option value="">请选择分类2</option>
</select>
<select id="category3" disabled>
  <option value="">请选择分类3</option>
</select>

// JS代码
var subCategories = {
  1: ['子分类1-1', '子分类1-2', '子分类1-3'],
  2: ['子分类2-1', '子分类2-2', '子分类2-3'],
  3: ['子分类3-1', '子分类3-2', '子分类3-3']
};
var subSubCategories = {
  1: {
    1: ['子子分类1-1-1', '子子分类1-1-2', '子子分类1-1-3'],
    2: ['子子分类1-2-1', '子子分类1-2-2', '子子分类1-2-3'],
    3: ['子子分类1-3-1', '子子分类1-3-2', '子子分类1-3-3']
  },
  2: {
    1: ['子子分类2-1-1', '子子分类2-1-2', '子子分类2-1-3'],
    2: ['子子分类2-2-1', '子子分类2-2-2', '子子分类2-2-3'],
    3: ['子子分类2-3-1', '子子分类2-3-2', '子子分类2-3-3']
  },
  3: {
    1: ['子子分类3-1-1', '子子分类3-1-2', '子子分类3-1-3'],
    2: ['子子分类3-2-1', '子子分类3-2-2', '子子分类3-2-3'],
    3: ['子子分类3-3-1', '子子分类3-3-2', '子子分类3-3-3']
  }
};

function onCategory1Change() {
  var category1 = document.getElementById("category1");
  var category2 = document.getElementById("category2");
  var category3 = document.getElementById("category3");
  category2.options.length = 1;
  category3.options.length = 1;
  if (category1.value === "") {
    category2.disabled = true;
    category3.disabled = true;
    return;
  }
  category2.disabled = false;
  for (var i = 0; i < subCategories[category1.value].length; i++) {
    var option = document.createElement("option");
    option.value = i + 1;
    option.text = subCategories[category1.value][i];
    category2.add(option);
  }
}

function onCategory2Change() {
  var category1 = document.getElementById("category1");
  var category2 = document.getElementById("category2");
  var category3 = document.getElementById("category3");
  category3.options.length = 1;
  if (category2.value === "") {
    category3.disabled = true;
    return;
  }
  category3.disabled = false;
  var subSubCategory = subSubCategories[category1.value][category2.value];
  for (var i = 0; i < subSubCategory.length; i++) {
    var option = document.createElement("option");
    option.value = i + 1;
    option.text = subSubCategory[i];
    category3.add(option);
  }
}

在这个代码示例中，我们使用了三个select元素来表示三级分类。当第一个select元素的选项发生变化时，我们会清空第二个和第三个select元素的选项，并根据选择的第一个分类动态添加第二个select元素的选项。当第二个select元素的选项发生变化时，我们会清空第三个select元素的选项，并根据选择的第一个和第二个分类动态添加第三个select元素的选项。在JavaScript中，我们使用了两个对象subCategories和subSubCategories来表示子分类和子子分类，以便动态添加选项。