1. 程式人生 > 其它 >jquery 省市縣 三級聯動

jquery 省市縣 三級聯動

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="./1-1-reg.css" />
  <link 
href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="//hovertree.com/texiao/bootstrap/4/css/city-picker.css" rel="stylesheet" type="text/css" /> <title>Document</title> <script src="//cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"
></script> <script src="//hovertree.com/texiao/bootstrap/4/js/city-picker.data.js"></script> <script src="//hovertree.com/texiao/bootstrap/4/js/city-picker.js"></script> <script src="//hovertree.com/texiao/bootstrap/4/js/main.js"></script> </head> <body> <
table class="content_form"> <tr class="trone"> <td class=" mouse_city"> <input id="city-picker3" class="form-control input" readonly type="text" name="location" value="" data-toggle="city-picker" /> </td> </tr> </table> </body> </html>

css

.content_form .trone {
  width: 100%;
  height: 66px;
  box-sizing: border-box;
  padding-bottom: 20px;
  position: relative;
}
.city-picker-span {
  border: 1px solid #d8e0e6 !important;
  padding-left: 12px !important;
  height: 46px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
  line-height: 46px;
  margin-left: 0;
  border: none;
}