Multiple dropdown redirect to URL ( HTML )

Question

I found a custom select dropdown with button redirect code. It works with one dropdown, but I want to make two dropdown menus. I tried adding var's for select-id2, but script stopped working and nothing happened.

<select id="select-id1">
    <option value="" selected="">First category</option>
    <option value="http://example.com">Example</option>
</select>

<select id="select-id2">
    <option value="" selected="">Second category</option>
    <option value="/page">Page</option>
</select>

<button onclick="siteRedirect()">GO</button>

<script>
    function siteRedirect() {
        var selectbox = document.getElementById("select-id");
        var selectedValue = selectbox.options[selectbox.selectedIndex].value;
        window.location.href = selectedValue;
    }
</script>

First one (select-id1) should have domain example.com, and the second one (select-id2) should add /page on the first one. So the redirection link should be example.com/page.

Is there any way to do with this code?

document.getElementById("select-id");, but your ids are select-id1 and select-id2 — Liftoff
– Liftoff, Commented May 22, 2019 at 17:06

qelli · Accepted Answer · 2019-05-22 17:34:05Z

3

You are searching for the element with id="select-id". When only select-id1 and select-id2 exists.

Try this:

function siteRedirect() {
var select1 = document.querySelector("#select-id1"),
    select2 = document.querySelector("#select-id2");
var category = select1.options[select1.selectedIndex].value,
    subcategory = select2.options[select2.selectedIndex].value;
    redirect = category+subcategory;
console.log("Redirect to: "+redirect);
}

<select id="select-id1">
<option value="" selected="">First category</option>
<option value="http://example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>

answered May 22, 2019 at 17:34

qelli

2,0872 gold badges14 silver badges21 bronze badges

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

2 Comments

Marin Bajic Over a year ago

Thats it! But I had to replace console.log("Redirect to: "+redirect); with window.location.href = redirect; . Thank you!

qelli Over a year ago

@MarinBajic Yes, no doubt. I just logged in console the url so you could see it. Glad to help! And welcome to Stackoverflow. Keep good questions up! You can read: What to do when someone answers my question? so your question is marked as solved and ready to help someone with a similar issue in the future.

JohnSnow · Accepted Answer · 2019-05-22 17:23:12Z

0

You are not getting a reference to the second <select> element. You just added it to your HTML, your script is unaware of it.

var selectbox2 = document.getElementById("select-id2");

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

This will make it redirect to whatever is the value of select-id2 option element

<select id="select-id2">
  <option value="" selected="">Second category</option>
  <option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>
<script>
  function siteRedirect() {
    var selectbox = document.getElementById('select-id2');
    var selectedValue = selectbox.options[selectbox.selectedIndex].value;
    window.location.href = selectedValue;
  }
</script>

edited May 22, 2019 at 17:23

answered May 22, 2019 at 17:11

JohnSnow

4544 silver badges17 bronze badges

6 Comments

Marin Bajic Over a year ago

I tried this. It still opens example.com, not example.com/page

JohnSnow Over a year ago

That's because you are just getting a reference to it, I edited it above.

Marin Bajic Over a year ago

Now it opens only /page...Wihout example.com

JohnSnow Over a year ago

so change the value to example.come/whatever, or keep that value in a string and adjust it dynamically

Marin Bajic Over a year ago

You don't understand me. select-id1 = first part of the other url ( example : my site is marin.com and I want redirection to amazon.com ). select-id2 = secound part of that url ( example : /shop ). So when I click go, it should go to amazon.com/shop

|

mattdaspy · Accepted Answer · 2019-05-22 17:40:58Z

0

You want to join split URLs together, for that, you have to concatenate the two parts and you can do it simply parsing the values on JS (as JavaScript already stores data into variables as strings, so you shouldn't have a problem with that)

The logic is pretty much like this :

var link1 = document.getElementById("select-id1").value;
var link2 = document.getElementById("select-id2").value;
var joined = link1 + link2

function siteRedirect() {
  window.location.href = joined;
}

See if that helps you

answered May 22, 2019 at 17:40

mattdaspy

8821 gold badge5 silver badges11 bronze badges

Comments

Marin Bajic · Accepted Answer · 2019-05-22 17:42:07Z

Thats it! Thank you all, but especially to k3llydev!

So. The final code is :

<html>
<head>
</head>
<body>
<select id="select-id1">
<option value="" selected="">First category</option>
<option value="example.com">Example</option>
</select>
<select id="select-id2">
<option value="" selected="">Second category</option>
<option value="/page">Page</option>
</select>
<button onclick="siteRedirect()">GO</button>

<script>
function siteRedirect() {
var select1 = document.querySelector("#select-id1"),
select2 = document.querySelector("#select-id2");
var category = select1.options[select1.selectedIndex].value,
subcategory = select2.options[select2.selectedIndex].value;
redirect = category+subcategory;
/*console.log("Redirect to: "+redirect);*/
window.location.href = redirect;
}
</script>
</body>
</html>

Solved!

Collectives™ on Stack Overflow

Multiple dropdown redirect to URL ( HTML )

4 Answers 4

2 Comments

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related