Pass multiple parameters to url from dropdown menu

Question

This may be a basic question but I am not able to find a solution. I have two drop down. I want to append the url parameter from the 2nd drop down to the first and I am not able to. Here is an example.

When I select SUB11 from dropdown1 the parameter is appended in the URL like this

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

Now when I select SUB21 from dropdown2, this is what I get (not what I want)

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

But I want this to be like this, appended to the already existing url paramter.

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

I think it has got to do with href in the dropdown2 and I don't know what to set it to. Please help.

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

IE5Master · Accepted Answer · 2015-07-10 17:48:54Z

1

Ideally you could create a HTML form and use <select> element.

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

click on submit and you will see they are in the URL: http://localhost:8080/test/testing.html?menu-1=SUB11&menu-2=SUB21

Check this out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

edited Jul 10, 2015 at 17:48

answered Jul 10, 2015 at 17:42

IE5Master

4131 gold badge3 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Garry · Accepted Answer · 2015-07-10 17:35:06Z

0

Use Jquery

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

Give id to second drop-down to get value using jquery.

answered Jul 10, 2015 at 17:35

Garry

5,0945 gold badges35 silver badges44 bronze badges

Collectives™ on Stack Overflow

Pass multiple parameters to url from dropdown menu

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related