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}`);
}
}
}
);
}
效果图如下: