select下拉框如何动态获取数据库的数据

项目要求：数据库一个主表一个分表，系统新增主表数据时，下拉框显示分表的名称，然后选择传入前台显示，最终新增主表时将选择的分表Id添加到主表。

通过thymeleaf的模板引擎实现

第一种实现方式：是通过thymeleaf的模板引擎，获取controller从数据库获取的list，再将list传到域中，通过th:each标签遍历填入options中。具体操作如下：
前端的新增主表时 分表的下拉框的div如下：

<div class="form-group">
            <label class="col-sm-3 control-label">充电站：</label>
            <div class="col-xs-4">
                <select name="stationId" id="station" class="form-control select-list">
                    <option th:each="station:${list}" th:value="${station.stationId}" th:text="${station.stationName}"></option>
                </select>
            </div>
        </div>

controller代码如下：

@Controller
@RequestMapping("/system/pile")
public class ChargePileController extends BaseController
{
    private String prefix = "system/pile";

    @Autowired
    private IChargePileService chargePileService;

    @Autowired
    private IStationService stationService;
 /**
     * 查询充电桩信息列表
     */
    @RequiresPermissions("system:pile:list")
    @PostMapping("/list")
    @ResponseBody
    public TableDataInfo list(ChargePile chargePile)
    {
        startPage();
        List<ChargePile> list = chargePileService.selectChargePileList(chargePile);
        return getDataTable(list);
    }
}

通过AJAX请求获取

第一种实现方式：是通过ajax请求获取数据，再通过append将数据拼接到options中
前端代码如下：

function getMissiveType(){
        alert("进来了")
        var prefix = ctx + "system/station";

        $.ajax({
                type:"get",
                dataType: "json",
                method:"post",
                url : prefix+"/list",
                data:"doaction=sectionList",
                success:function(data){
                    var len=data.rows.length;
                    for(i=0;i<len;i++){
                        $("#station").append(`<option value="${data.rows[i].stationId}">${data.rows[i].stationName}</option>`);
                    }
                }
            }
        );
    }

效果图如下：