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


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

通过thymeleaf的模板引擎实现

第一种实现方式:是通过thymeleaf的模板引擎,获取controller从数据库获取的list,再将list传到域中,通过th:each标签遍历填入options中。具体操作如下:
前端的新增主表时 分表的下拉框的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 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${data.rows[i].stationName}`);
                    }
                }
            }
        );
    }

效果图如下: