如何从下拉列表中传递值作为按钮的链接？

发布于 2025-02-08 12:24:33 字数 1083 浏览 1 评论 0原文

我正在创建一个Web应用程序（使用Thymeleaf，HTML，CSS，JavaScript），并遇到了一个问题。说我有一个搜索栏和一个按钮：

但是我想添加一些其他功能，例如“按人口搜索”，“ by Capital”等。我计划在其中包括这些选项的搜索栏旁边创建下拉列表，用户将从列出了他想如何搜索记录。我看不到这样做的方法。目前，这是一个搜索栏代码：

<h4 class="left">
        <form ui-jp="parsley" th:action="@{/events/showByState}" th:object="${myState}" method="get">
            <div class="row m-b">
                <div class="child">Search by State Name:</div>
                <div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r"/></div>
                <div class="child box-3">
                    <button class="btn">Search!</button>
                </div>
            </div>
        </form>
    </h4>

因此，对我而言，我该怎么做是不清楚的，因为我需要根据用户从列表中的选择来指定按钮的链接。任何帮助都将受到赞赏！

原文

I am creating a web app (using thymeleaf, html, css, javascript) and I ran into a problem. Say I have a search bar and a button like this:

Now this represents the functionality of an app and currently it can only search records from a table by their name. But I want to add some other functions like "search by population", "search by capital" etc. I was planning on creating a drop-down list next to the search bar where these options will be included, and the user will select from that list how he wants to search for a record. I can't see a way to do that. Currently this is a search bar code:

<h4 class="left">
        <form ui-jp="parsley" th:action="@{/events/showByState}" th:object="${myState}" method="get">
            <div class="row m-b">
                <div class="child">Search by State Name:</div>
                <div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r"/></div>
                <div class="child box-3">
                    <button class="btn">Search!</button>
                </div>
            </div>
        </form>
    </h4>

So it is unclear for me how I do this because I need to specify the link for button based on what user will choose from the list. Any help is appreciated!

分享到QQ

分享到微博

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

发布评论

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

病女 2025-02-15 12:24:33

您可以创建一个＆lt; select＆gt;元素，其值表示表单的操作是什么。每当其值更改时，您都可以更新表单的操作。

document.getElementById('search-by').addEventListener('change', function(e) {
  let searchBy = this.value;
  console.log(searchBy);
  this.form.action = `/events/${searchBy}`;
});

<form ui-jp="parsley" th:action="@{/events/showByState}" th:object="${myState}" method="get">
  <div class="row m-b">
    <div class="child">Search by
      <select id="search-by">
        <option value="showByState">State Name</option>
        <option value="showByPopulation">Population</option>
        <option value="showByCapital">Capital</option>
      </select>:</div>
    <div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r" /></div>
    <div class="child box-3">
      <button class="btn">Search!</button>
    </div>
  </div>
</form>

You can create a <select> element with options whose value indicate what the action of the form should be. Whenever its value changes, you can update the form's action.

document.getElementById('search-by').addEventListener('change', function(e) {
  let searchBy = this.value;
  console.log(searchBy);
  this.form.action = `/events/${searchBy}`;
});

<form ui-jp="parsley" th:action="@{/events/showByState}" th:object="${myState}" method="get">
  <div class="row m-b">
    <div class="child">Search by
      <select id="search-by">
        <option value="showByState">State Name</option>
        <option value="showByPopulation">Population</option>
        <option value="showByCapital">Capital</option>
      </select>:</div>
    <div class="child"><input id="filter" type="text" th:field="*{officialStateName}" class="form-control input-sm w-auto inline m-r" /></div>
    <div class="child box-3">
      <button class="btn">Search!</button>
    </div>
  </div>
</form>

回复收藏 0 原文

~没有更多了~