Different action for each selected option

Question

I’m trying to create an action for different option selected on the input, like, option 1 redirects to Facebook.com, option 2 redirects to Instagram, option 3 redirects to web.WhatsApp.com. How can I do that?


<label for “itens”>Choose one option</label>

<select name=“itens” id=“itens”>
    <option value=“facebook”</option>
    <option value=“instagram”</option>
    <option value=“whatsapp”</option>
</select>
```

Does this answer your question? [How do I redirect to another webpage?](https://stackoverflow.com/questions/503093/how-do-i-redirect-to-another-webpage) — Ken Lee, Oct 20 '22 at 17:15

score 1 · Answer 1 · answered Oct 20 '22 at 17:28

You can do this using assigning a method to onselect prop of the select element. See the example below.

function onSelectItem(event) {
  switch(event.value) {
    case "facebook":
      window.location.href="http://example.com"
      break;
    case "instagram":
      window.location.href="http://example.com"
      break;
    case "whatsapp":
      window.location.href="http://example.com"
      break;
    default:
      break;
  }
}

<select name="itens" id="itens" onchange="onSelectItem(this)">
    <option value="facebook">facebook</option>
    <option value="instagram">instagram</option>
    <option value="whatsapp">whatsapp</option>
</select>

Different action for each selected option

1 Answers1