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

【问题标题】：Pass multiple parameters to url from dropdown menu从下拉菜单中将多个参数传递给 url
【发布时间】：2015-09-29 13:30:30
【问题描述】：

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

当我从 dropdown1 中选择 SUB11 时，参数会像这样附加在 URL 中

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

现在当我从下拉列表 2 中选择 SUB21 时，这就是我得到的（不是我想要的）

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

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

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

我认为它与下拉菜单中的 href 2 有关，我不知道将其设置为什么。请帮忙。

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

【问题讨论】：

标签： html drop-down-menu href url-parameters

【解决方案1】：

使用 Jquery

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

为第二个下拉菜单提供 id 以使用 jquery 获取值。

【讨论】：

【解决方案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

【讨论】：