<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>
原生js简单的省市联动
最新推荐文章于 2022-11-03 17:15:16 发布