Bootstrap+jfinal实现省市级联下拉菜单

下面我将为你详细讲解“Bootstrap+jfinal实现省市级联下拉菜单”的完整攻略。

1.准备工作

首先，你需要安装Java环境、Maven和IDEA等工具，以及下载Bootstrap和jfinal框架。然后创建一个新的项目，将Bootstrap和jfinal框架导入到项目中。

2.创建实体类

创建一个JavaBean类，用于存储省市信息。例如，创建一个名为Address的类，包含id、pid（父级ID）、name和level（级别）四个属性。

public class Address {
    private int id;
    private int pid;
    private String name;
    private int level;

    // 省略Getter和Setter方法
}

3.创建数据表并插入数据

我们需要创建一个存储省市信息的表，并插入一些数据用于测试。例如，创建一个名为address的数据表，包含id、pid、name和level四个字段，然后插入一些数据。

4.编写Controller

在jfinal中，每个页面的请求都需要对应一个Action，我们需要创建一个名为AddressController的类，用于处理请求。我们需要添加两个Action：一个用于处理省级下拉菜单的请求，另一个用于处理市级下拉菜单的请求。

省级下拉菜单的Action：

public class AddressController extends Controller {

    public void getProvince() {
        List<Address> provinces = AddressService.getProvince();
        renderJson(provinces);
    }
}

市级下拉菜单的Action：

public class AddressController extends Controller {

    public void getCity() {
        int pid = getParaToInt("pid");
        List<Address> cities = AddressService.getCity(pid);
        renderJson(cities);
    }
}

其中，getParaToInt("pid")用于获取客户端传递过来的pid参数，即父级ID。

5.编写Service

我们需要创建一个名为AddressService的类，用于处理与地址相关的业务逻辑，包括查询数据库中的省市数据。

public class AddressService {

    public static List<Address> getProvince() {
        List<Address> provinces = Db.find("select * from address where level = 1");
        return provinces;
    }

    public static List<Address> getCity(int pid) {
        List<Address> cities = Db.find("select * from address where pid = ? and level = 2", pid);
        return cities;
    }
}

其中，Db是jfinal框架中的一个工具类，它提供了操作数据库的API。

6.编写前端代码

在客户端，我们需要通过Ajax请求服务器的省市数据，并动态生成省市级联下拉菜单。

省级下拉菜单的HTML代码：

<div class="form-group">
    <label for="province">省份：</label>
    <select id="province" class="form-control"></select>
</div>

市级下拉菜单的HTML代码：

<div class="form-group">
    <label for="city">城市：</label>
    <select id="city" class="form-control"></select>
</div>

通过Ajax请求服务器的省市数据：

// 请求省份数据
$.get('/address/getProvince', function (data) {
    var provinceSelect = $('#province');
    provinceSelect.empty();
    provinceSelect.append($('<option>').val('').text('请选择省份'));
    for (var i = 0; i < data.length; i++) {
        var option = $('<option>').val(data[i].id).text(data[i].name);
        provinceSelect.append(option);
    }
});

// 请求城市数据
$('#province').on('change', function () {
    var pid = $(this).val();
    $.get('/address/getCity', {pid: pid}, function (data) {
        var citySelect = $('#city');
        citySelect.empty();
        citySelect.append($('<option>').val('').text('请选择城市'));
        for (var i = 0; i < data.length; i++) {
            var option = $('<option>').val(data[i].id).text(data[i].name);
            citySelect.append(option);
        }
    });
});

示例

这里提供两个简单示例，详见以下网站：

• 示例1（点击这里）：演示了一个Bootstrap+jfinal实现省市级联下拉菜单的简单示例。
• 示例2（点击这里）：演示了一个使用MySQL数据库存储地址信息的例子。