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>`);
                    }
                }
            }
        );
    }

效果圖如下：