当地区选择变化时，动态更新客户名称下拉框（效果图如下）

实现步骤，html部分

<form class="form-horizontal m-t">
	<div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-4 control-label is-required">客户地区：</label>
                <div class="col-sm-7">
                    <select id="clientRegion" name="clientRegion" class="form-control">

                    </select>
                </div>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label class="col-sm-5 control-label is-required">客户名称：</label>
                <div class="col-sm-7">
                    <select id="clientName" name="clientName" class="form-control">

                    </select>
                </div>
            </div>
        </div>
    </div>
</form>

js部分

<script th:inline="javascript">
	var prefix1 = ctx + "ideabank/clients";
	
	$(function() {
        //项目基本信息
        loadClientOptions()
    })

	function loadClientOptions() {
        $.ajax({
            url: prefix1 + "/getClientOptions",
            type: "POST",
            success: function (res) {
                var data = res.data;

                // 填充客户地区下拉框
                var regionOptions = '';
                $.each(data.regions, function (i, region) {
                    regionOptions += `<option value="${region}">${region}</option>`;
                });
                $('#clientRegion').html(regionOptions);

                // 当地区选择变化时，动态更新客户名称下拉框
                $('#clientRegion').change(function () {
                    var selectedRegion = $(this).val();
                    var clientNames = data.namesByRegion[selectedRegion] || [];

                    var nameOptions = '';
                    $.each(clientNames, function (i, name) {
                        nameOptions += `<option value="${name}">${name}</option>`;
                    });
                    $('#clientName').html(nameOptions);
                });

                // 触发地区下拉框变化，初始化客户名称
                $('#clientRegion').trigger('change');
            }
        });
    }

后台Java代码

/**
 * 查询客户相关字段信息
 */
@PostMapping("/getClientOptions")
@ResponseBody
public AjaxResult getClientOptions(TbClients tbClients)
{
    List<TbClients> clients = tbClientsService.selectClientOptions();

    // 分离地区和客户名称
    Set<String> regions = new HashSet<>();
    Map<String, List<String>> namesByRegion = new HashMap<>();

    for (TbClients client : clients) {
        regions.add(client.getClientRegion());

        // 根据客户地区，将客户名称添加到对应的客户名称列表中
        namesByRegion.computeIfAbsent(client.getClientRegion(), k -> new ArrayList<>())
                .add(client.getClientName());
    }

    Map<String, Object> result = new HashMap<>();
    result.put("regions", regions);
    result.put("namesByRegion", namesByRegion);  // 每个地区对应的客户名称

    return AjaxResult.success(result);
}

mapper层下xml

DISTINCT 是作用于查询结果的整行数据，而不是单独的列。因此，它对 client_region 和 client_name 的组合进行去重。

只有当 client_region 和 client_name 的组合完全相同时，才会被视为重复并去除。
换句话说，如果某个 client_region 下有多个不同的 client_name，这些记录都会保留。

<select id="selectClientOptions" resultMap="TbClientsResult">
    select distinct client_region, client_name from tb_clients
</select>