一个js页面 里面包括一个二级联动 一级下拉框为单选 二级下来框为多选一个三级联动 一级下拉框为单选 二级下拉框多选 三级下拉框多选

以下是一个简单的实现：

HTML代码：

<!-- 二级联动 -->
<label for="province">省份：</label>
<select id="province" onchange="updateCities()">
  <option value="">请选择</option>
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="广东">广东</option>
</select>

<label for="city">城市：</label>
<select id="city" multiple>
  <option value="">请选择</option>
</select>

<!-- 三级联动 -->
<label for="country">国家：</label>
<select id="country" onchange="updateCitiesAndDistricts()">
  <option value="">请选择</option>
  <option value="中国">中国</option>
  <option value="美国">美国</option>
  <option value="日本">日本</option>
</select>

<label for="district">州/省：</label>
<select id="district" multiple>
  <option value="">请选择</option>
</select>

<label for="town">城镇：</label>
<select id="town" multiple>
  <option value="">请选择</option>
</select>

JavaScript代码：

// 二级联动
const cities = {
  北京: ['北京市'],
  上海: ['上海市'],
  广东: ['广州市', '深圳市', '珠海市']
};

function updateCities() {
  const province = document.getElementById('province');
  const city = document.getElementById('city');
  const selectedProvince = province.value;
  city.innerHTML = '';
  if (selectedProvince === '') {
    city.disabled = true;
    return;
  }
  city.disabled = false;
  for (let i = 0; i < cities[selectedProvince].length; i++) {
    const option = document.createElement('option');
    option.value = cities[selectedProvince][i];
    option.innerText = cities[selectedProvince][i];
    city.appendChild(option);
  }
}

// 三级联动
const districts = {
  中国: {
    北京: ['东城区', '西城区', '朝阳区'],
    广东: ['广州市', '深圳市', '珠海市'],
    上海: ['浦东新区', '静安区']
  },
  美国: {
    纽约州: ['纽约市', '布鲁克林'],
    加利福尼亚州: ['洛杉矶', '圣地亚哥', '旧金山'],
    德克萨斯州: ['休斯顿', '达拉斯']
  },
  日本: {
    东京都: ['千代田区', '港区', '新宿区'],
    大阪府: ['大阪市', '堺市', '岸和田市'],
    北海道: ['札幌市', '函馆市', '旭川市']
  }
};

function updateCitiesAndDistricts() {
  const country = document.getElementById('country');
  const district = document.getElementById('district');
  const town = document.getElementById('town');
  const selectedCountry = country.value;
  district.innerHTML = '';
  town.innerHTML = '';
  if (selectedCountry === '') {
    district.disabled = true;
    town.disabled = true;
    return;
  }
  district.disabled = false;
  town.disabled = false;
  for (const province in districts[selectedCountry]) {
    const option = document.createElement('option');
    option.value = province;
    option.innerText = province;
    district.appendChild(option);
  }
}

function updateTowns() {
  const country = document.getElementById('country');
  const district = document.getElementById('district');
  const town = document.getElementById('town');
  const selectedCountry = country.value;
  const selectedProvince = district.value;
  town.innerHTML = '';
  if (selectedProvince === '') {
    town.disabled = true;
    return;
  }
  town.disabled = false;
  for (let i = 0; i < districts[selectedCountry][selectedProvince].length; i++) {
    const option = document.createElement('option');
    option.value = districts[selectedCountry][selectedProvince][i];
    option.innerText = districts[selectedCountry][selectedProvince][i];
    town.appendChild(option);
  }
}

注意：

1. 二级联动的数据存储在cities对象中，三级联动的数据存储在districts对象中。
2. 二级联动的逻辑在updateCities()函数中实现，三级联动的逻辑分别在updateCitiesAndDistricts()和updateTowns()函数中实现。
3. 二级联动的城市数据在选择省份后动态生成。
4. 三级联动的省份和城镇数据在选择国家和省份后动态生成