简单H5前端下拉菜单select之二级联动

select二级联动

HTML:

一级下拉菜单

<select id="first" onchange="setSecond(this.value)">
		<option value="1">广西</option>
		<option value="2">广东</option>
</select>

二级下拉菜单

<select id="second">
</select>

JS:

function setSecond(value){
	  var val = value;
	  if(val == 1){
	    var sec = document.getElementById('second');
	    sec.options.length=0; //清空二级菜单项
	    sec.options[0] = new Option("南宁","nanning");
	    sec.options[1] = new Option("梧州","wuzhou");
	    sec.options[2] = new Option("柳州","liuzhou");
	  }else {
	    var sec = document.getElementById('second');
	    sec.options.length=0; //清空二级菜单项
	    sec.options[0] = new Option("广州","guangzhou");
	    sec.options[1] = new Option("深圳","shenzhen");
	    sec.options[2] = new Option("中山","zhongshan");
	  }
	}