常见的三级城市联动
我这里是请求的后台地址,可根据自己请求的后台数据进行下拉菜单渲染,这里请求过来的数据是省市区级的数据是同级别的,所以需要做省市区的层级区分然后再渲染下拉菜单,下面是案例:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/orderPage.css">
<link rel="stylesheet" href="./css/bootstrap.min.css">
</head>
<body>
<div class="content">
<form role="form">
<div class="form-group countryList">
<label><span class="star">*</span>都道府県</label>
<select name="" id="" class="form-control province"
onmousedown="if(this.options.length>6){this.size=7}" onblur="this.size=0"
onchange="this.size=0">
<option value="">请选择都道</option>
</select>
<select name="" id="" class="form-control city