easyui combobox级联

来源：互联网发布：淘宝号注册不用手机号编辑：程序博客网时间：2024/04/28 04:43

easyui combobox省市县的级联案例

javascript:

01$(function(){
02    var province = $('#province').combobox({
03        valueField:'areaid',
04        textField:'name',
05        editable:false,
06        url:'cascade-data.php',
07        onChange:function(newValue, oldValue){
08            $.get('cascade-data.php',{parentid:newValue},function(data){
09                city.combobox("clear").combobox('loadData',data);
10                county.combobox("clear")
11            },'json');
12        }
13    });
14     
15    var city = $('#city').combobox({
16        valueField:'areaid',
17        textField:'name',
18        editable:false,
19        onChange:function(newValue, oldValue){
20            $.get('cascade-data.php',{parentid:newValue},function(data){
21                county.combobox("clear").combobox('loadData',data);
22            },'json');
23        }
24    });
25     
26    var county = $('#county').combobox({
27        valueField:'areaid',
28        textField:'name',
29        editable:false
30    });
31});

后台代码PHP：

1<?php
2$parentid = isset($_GET['parentid']) ? $_GET['parentid'] : 0;
3$mysql = new SaeMysql();
4$sql = "SELECT * FROM `area` where parentid=$parentid order by vieworder";
5$data = $mysql->getData( $sql );
6echo json_encode($data);

鉴于有人提到要初始化就选中第一个：

那么你可以给combobox都加上onLoadSuccess:onLoadSuccess,onLoadSuccess方法内容如下：

1function onLoadSuccess(){
2    var target = $(this);
3    var data = target.combobox("getData");
4    var options = target.combobox("options");
5    if(data && data.length>0){
6        var fs = data[0];
7        target.combobox("setValue",fs[options.valueField]);
8    }
9}

区县sql数据：

area.zip