选择省份时，城市不会在数据列表中填充

Question

大家好，请帮我解决这个问题

城市字段将仅基于所选省份显示已过滤列表

• 我能够填充省份，但没有出现城市，我想使用数据列表，以便客户可以在下拉菜单中输入并查看建议

这是我当前正在处理的代码。

var cities = {
	'Abra': [
		'Bangued', 'Boliney', 'Bucay', 'Bucloc', 'Daguioman', 'Danglas',
		'Dolores', 'La Paz', 'Lacub', 'Lagangilang', 'Lagayan', 'Langiden',
		'Licuan-Baay', 'Luba', 'Malibcong', 'Manabo', 'Peñarrubia', 'Pidigan',
		'Pilar', 'Sallapadan', 'San Isidro', 'San Juan', 'San Quintin', 'Tayum',
		'Tineg', 'Tubo', 'Villaviciosa'
	],
	'Agusan\xa0del\xa0Norte': [
		'Buenavista', 'Butuan', 'Cabadbaran', 'Carmen', 'Jabonga', 'Kitcharao',
		'Las Nieves', 'Magallanes', 'Nasipit', 'Remedios T. Romualdez', 'Santiago',
		'Tubay'
	],
	'Agusan\xa0del\xa0Sur': [
		'Bayugan', 'Bunawan', 'Esperanza', 'La Paz', 'Loreto', 'Prosperidad',
		'Rosario', 'San Francisco', 'San Luis', 'Santa Josefa', 'Sibagat',
		'Talacogon', 'Trento', 'Veruela'
	],
}

var City = function () {

	this.p = [], this.c = [], this.a = [], this.e = {};
	window.onerror = function () {
		return true;
	}

	this.getProvinces = function () {
		for (let province in cities) {
			this.p.push(province);
		}
		return this.p;
	}
	this.getCities = function (province) {
		if (province.length == 0) {
			console.error('Please input province name');
			return;
		}
		for (let i = 0; i <= cities[province].length - 1; i++) {
			this.c.push(cities[province][i]);
		}
		return this.c;
	}
	this.getAllCities = function () {
		for (let i in cities) {
			for (let j = 0; j <= cities[i].length - 1; j++) {
				this.a.push(cities[i][j]);
			}
		}
		this.a.sort();
		return this.a;
	}
	this.showProvinces = function (element) {
		var str = '<option disabled selected value="">Select Province</option>';
		for (let i in this.getProvinces()) {
			str += '<option value=' + this.p[i] + '>' + this.p[i] + '</option>';
		}
		this.p = [];
		document.querySelector(element).innerHTML = '';
		document.querySelector(element).innerHTML = str;
		this.e = element;
		return this;
	}
	this.showCities = function (province, element) {
      var str = '<option disabled selected value="">Select City / Municipality</option>';
      //added value="" to meet 0 length & render an error message when no province or city is selected
		var elem = '';
		if ((province.indexOf(".") !== -1 || province.indexOf("#") !== -1)) {
			elem = province;
		} else {
			for (let i in this.getCities(province)) {
				str += '<option value="' + this.c[i] + '">' + this.c[i] + '</option>';
              //added "" for value's content so spaces can be registered into order details
			}
			elem = element;
		}
		this.c = [];
		document.querySelector(elem).innerHTML = '';
		document.querySelector(elem).innerHTML = str;
		document.querySelector(this.e).onchange = function () {
			var Obj = new City();
			Obj.showCities(this.value, elem);
		}
		return this;
	}
}

window.onload = function() {	
	var $ = new City();
	$.showProvinces("#province");
  $.showCities("#city");
}

<input required class="required" list="province" name="attributes[Province]" value="" placeholder="Select Province" />
<datalist id="province"></datalist>

<input required class="required" list="city" name="attributes[City]" value="" placeholder="Select City/Municipality" />
<datalist id="city"></datalist>