SpringBoot页⾯中select选项绑定数据库数据
  在⼀个select框中，option往往是写好的，这样难以适应数据库中项⽬的动态变化，因此需要将option中的项⽬与数据库数据进⾏绑定，本项⽬使⽤Spring Boot进⾏开发，下⾯演⽰绑定⽅法。
  ⾸先在前端定义⼀个基本select框，在这⾥把第⼀项写好了，并显⽰为select框的默认项。
<select id="selectshijuan" class="selectSJ" >
<option value="0">--请选择试卷--</option>
</select>
  接着在mapper中写数据库查询语句，在service中写查询⽅法
  ShitifenxiMapper
@Component
public interface ShitifenxiMapper {
@Select("SELECT DISTINCT shijuanming FROM fenshu WHERE shitileixing = '填空题' ORDER BY shijuanming")
public List<String> getShijuanming();
}
  ShitifenxiService：
@Service
public class ShitifenxiService {
@Autowired
private ShitifenxiMapper shitifenxiMapper;
public List<String> getShijuanleixing(){
Shijuanming();
}
}
  下⼀步在controller中接受试卷名并传给JS
@Controller
public class ShitifenxiController {
@Autowired
ShitifenxiService shitifenxiService;
//填充试卷名
@PostMapping(value = "/shijuanming")
@ResponseBody
public List<String> shijuanleixing(){
List<String> Shijuanleixing();
return sjm;
}
}
  最后，在JS中接受传⼊的试卷名并填充到select框的option中：
function fillShijuanming(){
var optionJson=[];
$.ajax({
select中distincttype: "post",
url: "/shijuanming",
data: {},
async:false,
success : function(data){
optionJson=data;
var ElementById("selectshijuan");
for(var i=0;i<optionJson.length;i++){
selectObj.add(new Option(optionJson[i],optionJson[i]));
}
}
});
}
  ⾄此，就可以在前端页⾯的select框中看到从数据库中获取的数据了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。