1.利用jQuery 来实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-3.2.1.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
$("#province").change(function(){
$("#city").empty();
console.log($("#province").val());
if($("#province").val()=="1")
{
var txt1=" <option value='024'>沈阳市</option>";
var txt2=" <option >大连市</option>";
var txt3=" <option >北京市</option>";
$("#city").append(txt1,txt2,txt3);
}
else if($("#province").val()=="2")
{
var txt1=" <option >济南市</option>";
var txt2=" <option >济宁市</option>";
var txt3=" <option >天津市</option>";
$("#city").append(txt1,txt2,txt3);
}
else if($("#province").val()=="3")
{
var txt1=" <option >火星</option>";
var txt2=" <option >彗星星</option>";
var txt3=" <option >M78星云</option>";
$("#city").append(txt1,txt2,txt3);
}else
{
$("#city").append("<option>请选择</option>");
}
});
});
</script>
</head>
<body>
<select id="province" >
<option id="">---</option>
<option value="1">辽宁省</option>
<option value="2">山东省</option>
<option value="3">外星</option>
</select>
<select id="city">
<option id="">请选择</option>
</select>
</body>
</html>
2.不使用jQuery
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function changeCity(provinceCtrl)
{
// 1.选择的省
// 2.删除市中的所有选项
// 3.根据省向 市的下拉框中添加option元素
var province = provinceCtrl.value;
var cityCtrl = document.getElementById("city");
cityCtrl.options.length=0;
if(province == "1")
{
//var option =new Option("济南市","024");
var option =document.createElement("option");
option.value="024";
option.innerHTML="沈陽";
//把option 挂在 city 下面
cityCtrl.appendChild(option);
var option =new Option("北京市","024");
//把option 挂在 city 下面
cityCtrl.appendChild(option);
var option =new Option("大连市","024");
//把option 挂在 city 下面
cityCtrl.appendChild(option);
var option =new Option("沈阳市","024");
//把option 挂在 city 下面
cityCtrl.appendChild(option);
}
else if(province == "2")
{
var option =new Option("吉林市","024");
//把option 挂在 city 下面
cityCtrl.appendChild(option);
var option =new Option("长春市","024");
//把option 挂在 city 下面
cityCtrl.appendChild(option);
}
else{
var option =new Option("请选择","024");
//把option 挂在 city 下面
cityCtrl.appendChild(option);
}
}
</script>
</head>
<body>
<select onchange="changeCity(this)">
<option id="">---</option>
<option value="1">辽宁省</option>
<option value="2">吉林省</option>
</select>
<select id="city">
<option id="">请选择</option>
</select>
</body>
</html>