Js省市联动

最新推荐文章于 2024-06-16 14:06:27 发布

Ruand~鳴

最新推荐文章于 2024-06-16 14:06:27 发布

阅读量96

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Ruyand/article/details/118311852

版权

Js省市联动

最近学习了个填省市自动回填的方法，挺好用的，也不用插件，也可以写成一个方法，要用的时候随时调用
前面样式可以看js内容部分：

<html>
<head>
	<meta charset="utf-8">
	<title>省市联动</title>
	<style>
		*{
			margin: 0;
			padding: 0;
			list-style-type: none;
		}
		body{
            background: url( "image/1.0.jpg");
            padding-top: 150px;
            background-image: url("image/1.0.jpg");
		}
		.conta{
			width: 300px;
			margin: 0 auto;
		}
		.conta .row{
			width: 100%;
			height: 45px;
			background: #fff;
			margin-top: 20px;
			border-radius: 10px;
		}
		.label{
			display: inline-block;
			line-height: 40px;
			color: #03a9f4;
			padding: 0 0px 0 15px;
		}
		.label::after{
			content: "|";
			color: #ccc;
			padding: 0 0 0 10px;
			font-weight: 300;
		}
		select{
			width: 69%;
			height: 30px;
			border-color: aliceblue;
			border-radius: 5px;
		}
	</style>
</head>

<body>
	<ul class="conta">
		<li class="row">
			<p class="label">省 份</p>
			<select name="province" id="province" onChange="onChange()">
				<option value="">--请选择--</option>
			</select>
		</li>
		<li class="row">
			<p class="label">城 市</p>
			<select name="city" id="city">
				<option value="">--请选择--</option>
			</select>
		</li>
	</ul>
    <script>
        var AArray=['湖北', '湖南', '广东'];;//省(需要位置对应)

        var Aselect= document.getElementById("province");
        for(var i=0;i<AArray.length;i++){
            var option=document.createElement("option");
            option.innerHTML=AArray[i];
            option.value=i;
            Aselect.appendChild(option);
        }
        var BArray = [
            ['武汉', '襄阳', '荆州'],
            ['长沙', '株洲', '湘潭'],
            ['广州', '深圳', '东莞']];//市(需要位置对应)

        var Bselect=document.getElementById("city");

        function onChange(){
            var val =Aselect.value;

            Bselect.options.length=1;

            for(var j=0;j<BArray[val].length;j++){
                var Boption=document.createElement("option");
                Boption.innerHTML=BArray[val][j];
                Bselect.appendChild(Boption);
                console.log(Bselect.appendChild(Boption));
            }
        }
    </script>
</body>
</html>

Ruand~鳴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js省市联动

Js省市联动最近学习了个填省市自动回填的方法，挺好用的，也不用插件，也可以写成一个方法，要用的时候随时调用前面样式可以看js内容部分：<html><head> <meta charset="utf-8"> <title>省市联动</title> <style> *{ margin: 0; padding: 0; list-style-type: none; } body{
复制链接

扫一扫