省市区三级联动

省市区三级联动

案例效果

案例步骤

1.通过接口获取省份信息
2.使用js获取到省市区下拉框元素
3.将服务器端返回的省份信息显示在下拉框中
4.为下拉框元素添加表单值改变事件(onchange)
5.当用户选择省份时,根据省份id获取县城信息
6.当用户选择城市时,根据城市id获取县城信息

HTML代码

 <div class="container">
        <div class="form-inline">
            <div class="form-group">
                <select  id="province">
                </select>
            </div>
            <div class="form-group">
                <select  id="city">
                    <option>请选择城市</option>
                </select>
            </div>
            <div class="form-group">
                <select  id="town">
                    <option value="">请选择县城</option>
                </select>
            </div>
        </div>
    </div>

CSS代码

<style>
        *{
   
            margin: 0;
            padding: 0;
        }
        .container{
   
            width: 800px;
            height: 400px;
            margin: 100px auto;
            background-color: #e4e4e4;
        }
        .container .form-inline{
   
            width: 700px;
            height: 50px;
            line-height: 50px;
            margin: 0 auto;
        }
        .form-inline .form-group{
   
            float: left;
            width: 200px;
            height: 50px;
            margin-left: 25px;
        }
        .container select{
   
            height: 25px;
            float: left;
            outline: none;
            margin: 16px 55px;
        }
    </style>

JS代码

<script src="./js/ajax.js"></script>
    <script src="./js/template-web.js"></script>
    <script type="text/html" id="provinceTpl">
        <option>请选择省份</option>
        {
   {
   each province}}
        <option value ="{
   {$value.id}}">{
   {
   $value.name}} </option>
        {
   {
   /each}}
    </script>
    <script type="text/html" id="cityTpl">
        <option>请选择城市</option>
        {
   {
   each city}}
        <option value ="{
   {$value.id}}">{
   {
   $value.name}} </option>
        {
   {
   /each}}
    </script>
    <script type="text/html" id="townTpl">
        <option>请选择县城</option>
        {
   {