在选择上动态创建下拉菜单

发布于 2025-01-28 05:59:05 字数 7762 浏览 0 评论 0原文

我之间在钓鱼日和渔夫之间有许多与人的关系。

这是我的实体级捕鱼日：

@Entity
@Table(name = "FISHING_DAY")
public class FishingDay {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long fishingDayId;

    @ManyToMany
    @JoinTable(name = "fisherman_day",
    joinColumns = @JoinColumn(name = "fishing_day_id"),
    inverseJoinColumns = @JoinColumn(name = "fisherman_id"))
    private Set<Fisherman> fishermen = new HashSet<Fisherman>();

    // more properties, getter & setter ...

这是我的实体级渔夫：

@Entity
@Table(name = "FISHERMAN")
public class Fisherman {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long fishermanId;

    @JsonIgnore
    @ManyToMany(mappedBy = "fishermen")
    private Set<FishingDay> fishingDays = new HashSet<FishingDay>();

    // more properties, getter & setter ...

钓鱼日 - 控制的附加方法和编辑方法：


    public static final String FORM_NAME_SINGLE = "FishingDaySingleList";
    private static final String REDIRECT_URL = "redirect:/fishingDays/show";

    @GetMapping("/add")
    public ModelAndView add()
    {
        LOGGER.info(LogUtils.info(CLASS_NAME, "add"));

        ModelAndView mv = new ModelAndView(FORM_NAME_SINGLE);
        mv.addObject("add", true);
        mv.addObject("fishingDay", new FishingDay());

        List<Fisherman> fishermen = fishermanRepository.findAll();
        mv.addObject("fishermen", fishermen);

        return mv;
    }

    @GetMapping("/edit/{fishingDayId}")
    public ModelAndView edit(@PathVariable long fishingDayId) {
        LOGGER.info(LogUtils.info(CLASS_NAME, "edit", String.format("%d", fishingDayId)));

        ModelAndView mv = new ModelAndView(FORM_NAME_SINGLE);
        Optional<FishingDay> optionalFishingDay = fishingDayRepository.findById(fishingDayId);

        if (optionalFishingDay.isPresent()) {
            FishingDay fishingDay = optionalFishingDay.get();
            List<Fisherman> fishermen = fishermanRepository.findAll();
            mv.addObject("add", false);
            mv.addObject("fishermen", fishermen);
            mv.addObject("fishingDay", fishingDay);
        }
        return mv;
    }

    @PostMapping(value = "/addEdit")
    public ModelAndView addEdit(@Valid @ModelAttribute FishingDay fishingDay, BindingResult bindingResult) {

        boolean error = false;
        LOGGER.info(LogUtils.info(CLASS_NAME, "addEdit", String.format("%s %b", fishingDay, error)));
        ModelAndView mv = new ModelAndView();

        if (!error) {
            error = bindingResult.hasErrors();
        }

        if (!error) {
            try {
                fishingDayRepository.save(fishingDay);
                mv.setViewName(REDIRECT_URL);
            }
            catch (Exception e) {
                e.printStackTrace();
                LOGGER.error(LogUtils.info(CLASS_NAME, "addEdit"));
                mv.addObject("error", e.getCause().getCause().getLocalizedMessage());
                error = true;
            }
        }
        else {
            mv.setViewName(FORM_NAME_SINGLE);
            mv.addObject("add", fishingDay.getFishingDayId() == null);
        }
        return mv;
    }

这是渔日林的捕鱼者：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title th:text="#{fishingDay.caption.plural}"></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">
    <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <form action="#" th:action="@{/fishingDays/addEdit}"
          th:object="${fishingDay}" method="POST" enctype="application/x-www-form-urlencoded"
          class="row g-3 needs-validation" novalidate>
        <table id="table1" class="table table-striped table-responsive-md">
            <tr>
                <td th:text="#{fishingDay.fishingDayId}"></td>
                <td><input type="text" th:field="*{fishingDayId}" size=10 readonly class="form-control"></td>
            </tr>
            <tr>
                <td th:text="#{fishingDay.fishingDate}"></td>
                <td><input type="date" th:field="*{fishingDate}" size=50 placeholder="" class="form-control"></td>
                <td class="alert alert-danger" th:if="${#fields.hasErrors('fishingDate')}" th:errors="*{fishingDate}">
                    FishingDate Error
                </td>
            </tr>
            <tr>
                <td th:text="#{fishingDay.waterTemperature}"></td>
                <td><input type="text" th:field="*{waterTemperature}" size=50 placeholder="" class="form-control"></td>
                <td class="alert alert-danger" th:if="${#fields.hasErrors('waterTemperature')}"
                    th:errors="*{waterTemperature}">WaterTemperature Error
                </td>
            </tr>
            <tr>
                <td th:text="#{fishingDay.sunrise}"></td>
                <td><input type="time" th:field="*{sunrise}" size=50 placeholder="" class="form-control"></td>
                <td class="alert alert-danger" th:if="${#fields.hasErrors('sunrise')}" th:errors="*{sunrise}">Sunrise
                    Error
                </td>
            </tr>
            <tr>
                <td th:text="#{fishingDay.sunset}"></td>
                <td><input type="time" th:field="*{sunset}" size=50 placeholder="" class="form-control"></td>
                <td class="alert alert-danger" th:if="${#fields.hasErrors('sunset')}" th:errors="*{sunset}">Sunset
                    Error
                </td>
            </tr>
            <tr>
                <td th:text="#{fisherman.caption.singular}"></td>
                <td>
                    <select class="form-control" id="fishermen" th:field="*{fishermen}" oninput="showStuff()">
                        <option value="-1" th:text="#{option.choose}"></option>
                        <option th:each="fm:${fishermen}"
                                th:value="${fm.fishermanId}"
                                th:text="${fm.fullName} + ' (' + ${fm.nickname} + ')'"
                                th:id="fmId">
                        </option>
                    </select>
                </td>
                <td class="alert alert-danger" th:if="${#fields.hasErrors('fishermen')}" th:errors="*{fishermen}"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" class="btn btn-primary" th:value="#{button.save}"/></td>
            </tr>
        </table>
        <p class="alert alert-danger" th:if="${error!=null}" th:text="${error}"></p>
    </form>
</div>
</body>
</html>

一切正常：但是我想在价值后动态创建相同的下拉菜单选择并将其附加到上一个下拉列表中。此外，在每个选择之后，应从列表中删除该值。这应该在提交或列表为空之前完成。
这是演示的图像

我想JavaScript可能有可能吗？但是我以前从来没有任何关系，这就是为什么当我尝试自己实现这一点时遇到许多麻烦的原因。

原文

I have a Many-to-Many-Relationship between FishingDay and Fisherman.

Here is my Entity-Class FishingDay:

@Entity
@Table(name = "FISHING_DAY")
public class FishingDay {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long fishingDayId;

    @ManyToMany
    @JoinTable(name = "fisherman_day",
    joinColumns = @JoinColumn(name = "fishing_day_id"),
    inverseJoinColumns = @JoinColumn(name = "fisherman_id"))
    private Set<Fisherman> fishermen = new HashSet<Fisherman>();

    // more properties, getter & setter ...

Here is my Entity-Class Fisherman:

@Entity
@Table(name = "FISHERMAN")
public class Fisherman {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long fishermanId;

    @JsonIgnore
    @ManyToMany(mappedBy = "fishermen")
    private Set<FishingDay> fishingDays = new HashSet<FishingDay>();

    // more properties, getter & setter ...

The Add- and Edit-Methods of FishingDay-ControllerClass:


    public static final String FORM_NAME_SINGLE = "FishingDaySingleList";
    private static final String REDIRECT_URL = "redirect:/fishingDays/show";

    @GetMapping("/add")
    public ModelAndView add()
    {
        LOGGER.info(LogUtils.info(CLASS_NAME, "add"));

        ModelAndView mv = new ModelAndView(FORM_NAME_SINGLE);
        mv.addObject("add", true);
        mv.addObject("fishingDay", new FishingDay());

        List<Fisherman> fishermen = fishermanRepository.findAll();
        mv.addObject("fishermen", fishermen);

        return mv;
    }

    @GetMapping("/edit/{fishingDayId}")
    public ModelAndView edit(@PathVariable long fishingDayId) {
        LOGGER.info(LogUtils.info(CLASS_NAME, "edit", String.format("%d", fishingDayId)));

        ModelAndView mv = new ModelAndView(FORM_NAME_SINGLE);
        Optional<FishingDay> optionalFishingDay = fishingDayRepository.findById(fishingDayId);

        if (optionalFishingDay.isPresent()) {
            FishingDay fishingDay = optionalFishingDay.get();
            List<Fisherman> fishermen = fishermanRepository.findAll();
            mv.addObject("add", false);
            mv.addObject("fishermen", fishermen);
            mv.addObject("fishingDay", fishingDay);
        }
        return mv;
    }

    @PostMapping(value = "/addEdit")
    public ModelAndView addEdit(@Valid @ModelAttribute FishingDay fishingDay, BindingResult bindingResult) {

        boolean error = false;
        LOGGER.info(LogUtils.info(CLASS_NAME, "addEdit", String.format("%s %b", fishingDay, error)));
        ModelAndView mv = new ModelAndView();

        if (!error) {
            error = bindingResult.hasErrors();
        }

        if (!error) {
            try {
                fishingDayRepository.save(fishingDay);
                mv.setViewName(REDIRECT_URL);
            }
            catch (Exception e) {
                e.printStackTrace();
                LOGGER.error(LogUtils.info(CLASS_NAME, "addEdit"));
                mv.addObject("error", e.getCause().getCause().getLocalizedMessage());
                error = true;
            }
        }
        else {
            mv.setViewName(FORM_NAME_SINGLE);
            mv.addObject("add", fishingDay.getFishingDayId() == null);
        }
        return mv;
    }

Here is the FishingDaySingleList:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title th:text="#{fishingDay.caption.plural}"></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css">
    <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <form action="#" th:action="@{/fishingDays/addEdit}"
          th:object="${fishingDay}" method="POST" enctype="application/x-www-form-urlencoded"
          class="row g-3 needs-validation" novalidate>
        <table id="table1" class="table table-striped table-responsive-md">
            <tr>
                <td th:text="#{fishingDay.fishingDayId}"></td>
                <td><input type="text" th:field="*{fishingDayId}" size=10 readonly class="form-control"></td>
            </tr>
            <tr>
                <td th:text="#{fishingDay.fishingDate}"></td>
                <td><input type="date" th:field="*{fishingDate}" size=50 placeholder="" class="form-control"></td>
                <td class="alert alert-danger" th:if="${#fields.hasErrors('fishingDate')}" th:errors="*{fishingDate}">
                    FishingDate Error
                </td>
            </tr>
            <tr>
                <td th:text="#{fishingDay.waterTemperature}"></td>
                <td><input type="text" th:field="*{waterTemperature}" size=50 placeholder="" class="form-control"></td>
                <td class="alert alert-danger" th:if="${#fields.hasErrors('waterTemperature')}"
                    th:errors="*{waterTemperature}">WaterTemperature Error
                </td>
            </tr>
            <tr>
                <td th:text="#{fishingDay.sunrise}"></td>
                <td><input type="time" th:field="*{sunrise}" size=50 placeholder="" class="form-control"></td>
                <td class="alert alert-danger" th:if="${#fields.hasErrors('sunrise')}" th:errors="*{sunrise}">Sunrise
                    Error
                </td>
            </tr>
            <tr>
                <td th:text="#{fishingDay.sunset}"></td>
                <td><input type="time" th:field="*{sunset}" size=50 placeholder="" class="form-control"></td>
                <td class="alert alert-danger" th:if="${#fields.hasErrors('sunset')}" th:errors="*{sunset}">Sunset
                    Error
                </td>
            </tr>
            <tr>
                <td th:text="#{fisherman.caption.singular}"></td>
                <td>
                    <select class="form-control" id="fishermen" th:field="*{fishermen}" oninput="showStuff()">
                        <option value="-1" th:text="#{option.choose}"></option>
                        <option th:each="fm:${fishermen}"
                                th:value="${fm.fishermanId}"
                                th:text="${fm.fullName} + ' (' + ${fm.nickname} + ')'"
                                th:id="fmId">
                        </option>
                    </select>
                </td>
                <td class="alert alert-danger" th:if="${#fields.hasErrors('fishermen')}" th:errors="*{fishermen}"></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" class="btn btn-primary" th:value="#{button.save}"/></td>
            </tr>
        </table>
        <p class="alert alert-danger" th:if="${error!=null}" th:text="${error}"></p>
    </form>
</div>
</body>
</html>

Everything is working fine, but I want to create the same dropdown dynamically after a value is selected and append it to the previous dropdown. Moreover, after every selection the value should be removed from list. This should be done until submit or the list is empty.
Here is an image for demonstration

I guess it is possible with javascript? But I've never had anything to do with it before and that's why I run into many troubles when I try to realize this on my own.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

弱骨蛰伏 2025-02-04 05:59:05

是的，JavaScript可以处理此操作。尝试这个：

 <select name="val" size="1" id="fishermen" onchange="doSomething();">
     <option value="A">A</option>
     <option value="B">B</option>
     <option value="C">C</option>
     <option value="D">D</option>
     <option value="E">E</option>
 </select>
 
 <script>
   function doSomething() {
     var selectedFisherman = document.getElementById("fishermen");
     for (var i=0; i<selectedFisherman .length; i++) {
       if (selectedFisherman.options[i].value == selectedFisherman.value) {
         selectedFisherman[i].setAttribute("hidden", "hidden");
       }else {
         selectedFisherman[i].removeAttribute("hidden");
       }
     }
   }
 </script>

Yes, JavaScript can handle this. Try this one:

 <select name="val" size="1" id="fishermen" onchange="doSomething();">
     <option value="A">A</option>
     <option value="B">B</option>
     <option value="C">C</option>
     <option value="D">D</option>
     <option value="E">E</option>
 </select>
 
 <script>
   function doSomething() {
     var selectedFisherman = document.getElementById("fishermen");
     for (var i=0; i<selectedFisherman .length; i++) {
       if (selectedFisherman.options[i].value == selectedFisherman.value) {
         selectedFisherman[i].setAttribute("hidden", "hidden");
       }else {
         selectedFisherman[i].removeAttribute("hidden");
       }
     }
   }
 </script>

回复收藏 0 原文

~没有更多了~