Как заполнить выпадающий список предыдущим выбором Spring тимилеф

Question

Мне нужно создать второй выпадающий список на основе предыдущего выбора.В основном пользователь должен выбрать скрининг, а другой выпадающий список должен показать места для выбранного скрининга.

Мой контроллер

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

Итак, я получаю время показа, но не могу понять, как получить места для каждого второго показа в контроллере и передать выбранный идентификатор во второй выпадающий список

Thymeleaf

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

My Entity 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;

My Seating Entity

@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, но не знаю какиспользовать их правильно.

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

Я надеюсь, что этопомогает