如何通过先前的选择填充下拉列表 Spring thymeleaf答案

【问题标题】：How to populate dropdown list by previous selection Spring thymeleaf如何通过先前的选择填充下拉列表 Spring thymeleaf
【发布时间】：2018-12-06 14:50:50
【问题描述】：

我需要根据之前的选择创建第二个下拉列表。基本上用户需要选择筛选，其他下拉列表必须显示所选筛选的座位。

我的控制器

@RequestMapping("/movieDetail")
public String movieDetail(
        @PathParam("id") Long id, Model model, Principal principal
        ) {
    if(principal != null) {
        String username = principal.getName();
        User user = userService.findByUsername(username);
        model.addAttribute("user", user);
    }

    Movie movie = movieService.findOne(id);
    List<ShowTime>showTimeList=movie.getShowTimeList();

    model.addAttribute("movie", movie);
    model.addAttribute("showTimeList",showTimeList);


    return "movieDetail";
}

所以我得到了演出时间，但我不知道如何在控制器中获得每隔一个演出时间的座位并将选定的 id 传递给第二个下拉列表

百里香

<select name="showTime">
<option th:each="showTime : ${showTimeList}" 
th:value="${showTime.id}"th:text="${showTime.date} +' '+ ${showTime.time}">
</option>
</select>

我的 ShowTime 实体

@Entity
public class ShowTime {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;

@ManyToOne
@JoinColumn(name="movie_id")
private Movie movie;

@ManyToOne
@JoinColumn(name="saloon_id")
private Saloon saloon;

@Temporal(TemporalType.DATE)
private Date date;

@Temporal(TemporalType.TIME)
private Date time;

@OneToMany(cascade=CascadeType.ALL,mappedBy = "showTime")
@JsonIgnore
private List<Seating> SeatingList;

我的座位实体

@Entity
public class Seating {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Long id;

@ManyToOne
@JoinColumn(name="showtime_id")
private ShowTime showTime;

private int seatNo;

我想我需要使用 jquery ajax 但不知道如何正确使用它们。

【问题讨论】：

标签： jquery spring thymeleaf

【解决方案1】：

我在我的项目中使用了类似的东西。您将需要使用 jQuery 来更改第二个选择框的内容。假设第二个选择框名为“secondBox”。

你可以像这样从第一个选择框触发 jQuery 函数

<select id="showTime" name="showTime" onclick="onShowtimeChanged()">
   <option th:each="showTime : ${showTimeList}" 
       th:value="${showTime.id}"th:text="${showTime.date} +' '+ ${showTime.time}">
   </option>
</select>

注意onclick属性onclick="onShowtimeChanged()"，每次更改选中项时都会调用jQuery函数。

然后，您需要将 ShowTimeList 传递给一个 javascript 变量，以便您以后可以使用它。您可以通过将以下代码放在页面末尾（您有脚本部分的位置）来做到这一点。

<script  th:inline="javascript">
    var showTimeList = /*[[${showTimeList}]]*/ 'showTimeList';
</script>

jQuery 函数将是

function onShowtimeChanged() {
    var chosenShowtime = $("showTime").val();
    for (i=0;i<showTimeList.length;i++) {
        if (showTimeList[i].id == chosenShowTime) {
            $('#secondBox option').remove();
            seats = showTimeList[i].SeatingList;
            for (n=0;m<seats.length;n++) {
                $('#secondBox').append($('<option>', {
                    value: seats[n].id,
                    text: seats[n].seatNo
                }));
            }
            $("#secondBox").trigger("chosen:updated");
        }
    }
}

希望对你有帮助

【讨论】：