如何通过先前的选择填充下拉列表Spring thymeleaf [英] How to populate dropdown list by previous selection Spring thymeleaf

问题描述

我需要根据先前的选择创建第二个下拉列表.基本上，用户需要选择放映屏幕，其他下拉列表必须显示所选屏幕的座位.

I need to create a second dropdown list based on previous selection. Basically user needs to select the screening and other dropdownlist has to show the seats for the selected screeing.

我的控制器

@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传递给第二个下拉列表

So i get the show times but i cant figure out how to get every other show time's seats in controller and pass the selected id to the second dropdown

胸腺

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

我的ShowTime实体

My ShowTime entity

@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，但不知道如何正确使用它们.

I think i need use jquery ajax but don't know how to use them properly.

推荐答案

我在项目中使用了类似的方法.您将需要使用jQuery来更改第二个选择框的内容.假设第二个选择框称为"secondBox".

I use something similar on my project. You will need to use jQuery to change the content of the second select box. Let's assume that the second select box is called 'secondBox'.

您可以从第一个选择框中触发jQuery函数

You can trigger the jQuery function from the first select box like that

<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函数.

Notice the onclick property onclick="onShowtimeChanged()", this will call the jQuery function every time you change the selected item.

然后，您需要将ShowTimeList传递给javascript变量，以便稍后使用.您可以通过将以下代码放在页面末尾(您的脚本部分所在的位置)来实现此目的.

Then, you will need to pass the ShowTimeList to a javascript variable, so you can use it later on. You can do that by placing the following code at the end of your page (where you have your script section).

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

我希望这对您有帮助

这篇关于如何通过先前的选择填充下拉列表Spring thymeleaf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！