原生js简单的省市联动

<h2>省市级联下拉</h2>
		        <select id="provinces" οnchange="changeCity(this.value)">
			<option value="-1">--请选择--</option>
		</select>
		<select id="cities">
			<option value="-1">--请选择--</option>
		</select>
		<script>
			var provinces=['北京','天津','四川'];
			var cities=[
				['东城区','西城区'],
				['河东区','和平区'],
				['成都市','绵阳市']
			];
			var fragment=document.createDocumentFragment();  //创建一个文档片段对象,使用它可以减少dom渲染的次数,提高效率
			for (var i=0;i<provinces.length;i++) {
				var option=document.createElement('option'); //创建元素节点
				option.setAttribute('value',i);   //为创建的元素节点设置属性值
				option.innerHTML=provinces[i];
				fragment.appendChild(option);     //将创建的元素节点追加到fragment
			}
			document.getElementById('provinces').appendChild(fragment);
			function changeCity(optionValue){
				if(optionValue==-1){
					return;
				}
				//删除下拉框中已有的城市
				var citiesSelect=document.getElementById('cities');
				while(citiesSelect.children.length>1){
					citiesSelect.removeChild(citiesSelect.lastElementChild); //从最后一个元素删除，是因为从第一个元素删除可能出现问题
				}
				var cityArr=cities[optionValue];
				var fragment=document.createDocumentFragment();
				for (var i=0;i<cityArr.length;i++) {
					var option=document.createElement('option');
					option.setAttribute('value',i);
					option.innerHTML=cityArr[i];
					fragment.appendChild(option);
				}
				citiesSelect.appendChild(fragment);
			}
			
		</script>