效果圖

html頁面：

<li>所在地區：
<div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-3">所在省</label>
        <div class="col-md-9">

            <select name="province" required id="province" class="form-control"  onclick="chooseMarket();">
                  <option selected value="">選擇所在的省份</option>
          
                  <foreach name="province" item="vo">
                    <option value="{$vo.provinceid}">{$vo.province}</option>
                  </foreach>
            </select>
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="form-group">
        <label class="control-label col-md-3">所在市</label>
        <div class="col-md-9">
            <select id="market" name="city" required class="form-control"   onclick="chooseArea();"  >
                <option selected value="">請選擇所在的市</option>
            </select>
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="form-group">
        <label class="control-label  col-md-3">所在區/縣</label>
        <div class="col-md-9">
                <select name="county" required id="area"  class="form-control" onclick="defaultNext()">
                    <option selected value="">請選擇所在的區/縣</option>
                </select>
        </div>
    </div>
</div>
</li>



<!-- 隱藏域攜帶 sc_area sc_areanum  跟隨form表單提交值 -->
<input type="hidden" name="post[sc_area]" id="sc_area" value="">
<input type="hidden" name="post[sc_areanum]" id="sc_areanum" value="">
 

對應 html 中的 js

<!-- 後來 做的三級聯動  從資料庫裡面查出來 -->

<script type="text/javascript">

 function  chooseMarket() {

      console.log('js點選省');

      // var options=$("#province option:selected").text();   // 獲取名字
      // var options=$("#province option:selected").val();       // 獲取省 的id
      var options=$("#province option:selected");       
      
      // console.log(options.val());
  
      // 下面 是給 市 遍歷值 的
      if(options.text()!="選擇所在的省份"){

        $.ajax({
    
            url:"{:U('Activity/chengguo/ajax_chooseMarket')}",       
            type:'POST',
            data:{
              id:options.val()
            },
            dataType:'JSON',
            success:function(data){
             
              console.log('走到 遍歷市');
              // console.log(data);
              
              // 把物件轉成陣列
              var data2 = [];   
              for (let i in data) {
                  let o = {};
                  o[i] = data[i];
                  data2.push(o)
              }
            
              // 去除最後兩個元素
              var data3 = data2.pop();
              data2.pop();

              // console.log(data2);

              var item = ""; 
              for(var i = 0 ; i < data2.length; i++) { 

                item += '<option value="' + data2[i][i].cityid + '">' + data2[i][i].city + '</option>';
            }

            $("#market").append(item);
            
            },
            error:function(){
              alert(222);
            }
        })

      }

      $("#market").empty();
      $("#area").empty();
}


  // 遍歷 顯示 市 下面 所有的 縣
  function chooseArea() {

    var city = $("#market option:selected");

    // console.log(city.val());
    // console.log(city.text());
    
    if(city.text()!="請選擇所在的市"){

          $.ajax({
              url:"{:U('Activity/chengguo/ajax_chooseArea')}",       
              type:'POST',
              data:{
                id: city.val()
              },
              dataType:'JSON',
              success:function(data){
               
                // console.log(data);
                var data2 = [];   
                for (let i in data) {
                    let o = {};
                    o[i] = data[i];
                    data2.push(o)
                }
              
                // 去除最後兩個元素
                var data3 = data2.pop();
                data2.pop();

                console.log(data2);
                var item = ""; 
                for(var i = 0 ; i < data2.length; i++) { 

                  item += '<option value="' + data2[i][i].areaid + '">' + data2[i][i].area + '</option>';   
              }

              $("#area").append(item);
              
              },
              error:function(){
                alert(222);
              }
          })
    }
    $("#area").empty();
}


// <!-- 隱藏域攜帶 sc_area sc_areanum -->
// <input type="hidden" name="post[sc_area]" id="sc_area" value="">
// <input type="hidden" name="post[sc_areanum]" id="sc_areanum" value="">



// 這一個步驟 獲取最後點選的 縣id 並給 form 表單賦值
function defaultNext() {

	var pro = $("#province option:selected");    // 獲取 省
	var city = $("#market option:selected");   // 獲取 市

    var area = $("#area option:selected");   // 獲取到最後的 areaid

    var dizhi = pro.text() +','+city.text()+','+area.text();

    var num = area.val();
    // 拼接 省市縣
    // console.log(area.val());
    // console.log(pro.text());
    // console.log(city.text());
    // console.log(area.text());
    // console.log(dizhi);

    $('#sc_areanum').val(num);    // 賦值
    $('#sc_area').val(dizhi);

}
</script>
 

對應 控制器

// 初載入頁面的時候，要把 所有省的值 遍歷顯示到頁面
// 顯示 省份
$pro_model=M('dqprovinces');
$province = $pro_model->select(); 

$this->assign("province",$province);

js 中對應的控制器，返回對應 下屬市縣列表

//  頁面 ajax 返回 省 下面的市

public function ajax_chooseMarket(){

    $id = I('post.id');

    $city_model=M('dqcities');
  
    $where['provinceid'] = $id;
    $result = $city_model->where($where)->select();  

    // var_dump($result);
    // die;
    $this->ajaxReturn($result,'JSON');
}


// 遍歷 市 下面的 縣
public function ajax_chooseArea(){

    // 接收傳過來的id
    $id = I('post.id');

    $area_model=M('dqareas');
  
    $where['cityid'] = $id;
    $result = $area_model->where($where)->select();  

    // var_dump($result);
    // die;
    $this->ajaxReturn($result,'JSON');

}