Question

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

我的控制器

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="{{ asset('js/datatables.min.js')}}"></script>

所以我得到了放映时间，但是我想不通如何在控制器中获得其他放映时间的席位，并将选定的ID传递给第二个下拉列表

胸腺

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

我的ShowTime实体

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

我的座位实体

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

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

Answer 1

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

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

 var PinAsync = await _service.DataAsync(MyTodoItem.ID, "1000");

请注意onclick属性 onclick =“ onShowtimeChanged（）” ，这将在您每次更改所选项目时调用jQuery函数。

然后，您需要将ShowTimeList传递给javascript变量，以便稍后使用。为此，您可以将以下代码放在页面末尾（在脚本部分中）。

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

jQuery函数将会

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

我希望这对您有帮助

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

1 个答案: