从下拉菜单中将多个参数传递给 url

Question

这可能是一个基本问题，但我找不到解决方案。我有两个下降。我想将第二个下拉列表中的 url 参数附加到第一个下拉列表中，但我做不到。这是一个例子。

当我从 dropdown1 select SUB11 参数附加在 URL 像这样

http://localhost:8080/test/testing.html?par1=sub11

现在当我从 dropdown2 select SUB21 时，这就是我得到的（不是我想要的）

http://localhost:8080/test/testing.html&par2=sub21

但我希望它像这样附加到已经存在的 url 参数。

http://localhost:8080/test/testing.html?par1=sub11&par2=sub21

我认为这与dropdown2中的href有关，我不知道将其设置为什么。请帮忙。

 <ul>
        <li>
            <a href="#">Menu 1</a>
            <ul class="dropdown">
                <li><a href="?par1=sub11">SUB11</a></li>
                <li><a href="?par1=sub12">SUB12</a></li>
                <li><a href="?par1=sub13">SUB13</a></li>
            </ul>

        </li>
         <li>
            <a href="#">Menu 2</a>
            <ul class="dropdown">
                <li><a href="&amp;par2=sub21">SUB21</a></li>
                <li><a href="&amp;par2=sub22">SUB22</a></li>
                <li><a href="&amp;par2=sub23">SUB23</a></li>
            </ul>

        </li>
    </ul>

Answer 1

使用Jquery

$( '.dropdown' ).on( 'change', function( e ){
  document.location.href = "localhost:8080/test/testing.html?par1=" + "&par2=" + $( this ).val() + "seconddropdownvalue";
 });

将 id 赋予第二个下拉菜单以使用 jquery 获取值。

Answer 2

理想情况下，您可以创建一个 HTML 表单并使用 <select> 元素。

<form method="get">
<select name="menu-1">
    <option value="SUB11">SUB11</option>
    <option value="SUB12">SUB12</option>
    <option value="SUB13">SUB13</option>
</select>
<select name="menu-2">
    <option value="SUB21">SUB21</option>
    <option value="SUB22">SUB22</option>
    <option value="SUB23">SUB23</option>
</select> 
<input type="submit" value="Submit" />

点击提交，您会看到它们在 URL: http://localhost:8080/test/testing.html?menu-1=SUB11&menu-2=SUB21

看看这个https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

从下拉菜单中将多个参数传递给 url

Pass multiple parameters to url from dropdown menu

html

href

url-parameters

drop-down-menu