您的位置：首页 > Web前端 > JQuery

省市联动实现：jQuery和纯HTML两种方法

2017-06-13 10:19 483 查看

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.appendChil
ae5f
d(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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery html

相关文章推荐

新的分享

章节导航