关于#java#的问题：在bootstrapTable中如果有两个select标签做联动，标签1选择选项后，选项数据作为参数传入服务器，标签2作根据标签1传入的参数获取选项

Question

在bootstrapTable中如果有两个select标签做联动，标签1选择选项后，选项数据作为参数传入服务器，标签2作根据标签1传入的参数获取选项。如何实现这个联动。

Answer 1

引自免费微信小程序：皆我百晓生

要实现在Bootstrap Table中两个<select>标签的联动效果，可以使用JavaScript（结合jQuery）来监听第一个<select>的变化，并根据所选值向服务器发送请求，然后更新第二个<select>的内容。以下是实现这一功能的具体步骤和示例代码：

步骤 1: HTML 结构设置

首先，在HTML中创建两个<select>元素，通常它们会被放置在一个表单内。

<select id="select1">
    <option value="">请选择</option>
    <!-- 假设这里已经有预设的选项 -->
    <option value="1">选项 1</option>
    <option value="2">选项 2</option>
    <!-- 更多选项... -->
</select>

<select id="select2">
    <option value="">请选择</option>
    <!-- 这个 select 的选项将通过 AJAX 请求动态填充 -->
</select>

步骤 2: JavaScript 逻辑编写

接下来，使用jQuery监听第一个<select>元素的选择变化，并使用AJAX调用服务器接口。

$(document).ready(function () {
    $('#select1').on('change', function () {
        var selectedValue = $(this).val();
        if (selectedValue) {
            $.ajax({
                url: '/your-server-endpoint',
                type: 'GET',
                data: { param1: selectedValue },
                success: function (data) {
                    // 清空第二个 select 的选项
                    $('#select2').empty();
                    // 添加默认的“请选择”选项
                    $('#select2').append('<option value="">请选择</option>');
                    // 根据返回的数据动态添加选项
                    $.each(data, function (key, value) {
                        $('#select2').append('<option value="' + key + '">' + value + '</option>');
                    });
                },
                error: function () {
                    console.log("Error in fetching data");
                }
            });
        } else {
            // 如果没有选择任何选项，清空第二个 select
            $('#select2').empty().append('<option value="">请选择</option>');
        }
    });
});

步骤 3: 服务器端处理

在服务器端，你需要设置一个端点来接收来自前端的请求并返回相应的数据。这部分代码依赖于你使用的后端技术，例如Java Spring Boot。以下是一个简单的Spring Controller示例：

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import java.util.Map;

@RestController
public class YourController {

    @GetMapping("/your-server-endpoint")
    public Map<String, String> fetchOptions(@RequestParam("param1") String param1) {
        // 根据 param1 查询数据库或其他数据源，返回相应的选项数据
        // 这里仅作示例，返回硬编码的Map
        return Map.of(
                "1", "子选项 A",
                "2", "子选项 B",
                // 更多选项...
        );
    }
}

以上步骤和代码应该能帮助你实现两个<select>标签的联动功能。确保你的服务器端和客户端URL、方法等信息一致，以便正确通信。