Redirect on select option in select box

Question

At the moment I am using this    lt select ONCHANGE  location   this options this selectedIndex  value   gt    it redirect me on the location inside of the option value  But it doesn t work as expected    mean that if I click on the first option of the select  then onChange action not running  I was thinking about javascript  but I think you ll have some better suggestions guys  So how can I make it work if I click on each option it ll redirect me to the it s value

User · Answer

This can be archived by adding code on the onchange event of the select control.

For Example:

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
    <option value=""></option>
    <option value="http://google.com">Google</option>
    <option value="http://gmail.com">Gmail</option>
    <option value="http://youtube.com">Youtube</option>
</select>

User · Answer

Because the first option is already selected  the change event is never fired  Add an empty value as the first one and check for empty in the location assignment   Here s an example   https   jsfiddle net bL5sq    x000D   x000D   lt select onchange  this options this selectedIndex  value  amp  amp   window location   this options this selectedIndex  value    gt  x000D     lt option value    gt Select    lt  option gt  x000D     lt option value  https   google com  gt Google lt  option gt  x000D     lt option value  https   yahoo com  gt Yahoo lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

I d strongly suggest moving away from inline JavaScript  to something like the following   function redirect goto       var conf   confirm  Are you sure you want to go elswhere         if  conf  amp  amp  goto                  window location   goto           var selectEl   document getElementById  redirectSelect     selectEl onchange   function        var goto   this value      redirect goto         JS Fiddle demo  404 linkrot victim   JS Fiddle demo via Wayback Machine  Forked JS Fiddle for current users   In the mark-up in the JS Fiddle the first option has no value assigned  so clicking it shouldn t trigger the function to do anything  and since it s the default value clicking the select and then selecting that first default option won t trigger the change event anyway     Update  The latest example s  2017-08-09  redirect URLs required swapping out due to errors regarding mixed content between JS Fiddle and both domains  as well as both domains requiring  sameorigin  for framed content  - Albert

User · Answer

-- dynamic select dropdown --        lt select class  form-control m-bot15  name  district id           onchange   location   this options this selectedIndex  value            gt             lt option value    gt --Select-- lt  option gt             lt option value     gt All lt  option gt                foreach  location as  district                   lt option  value   district id     district- gt district id      gt                        district- gt district                     lt  option gt                endforeach          lt  select gt

User · Answer

For someone who doesn t want to use inline JS    lt select data-select-name gt       lt option value    gt Select    lt  option gt       lt option value  http   google com  gt Google lt  option gt       lt option value  http   yahoo com  gt Yahoo lt  option gt   lt  select gt     lt script type  text javascript  gt      document addEventListener  DOMContentLoaded  function             document querySelector  select data-select-name    onchange changeEventHandler        false        function changeEventHandler event            window location href   this options this selectedIndex  value         lt  script gt

User · Answer

to make it as globally reuse function using jquery  HTML   lt select class  select location  gt      lt option value  http   localhost com app page1 html  gt Page 1 lt  option gt      lt option value  http   localhost com app page2 html  gt Page 2 lt  option gt      lt option value  http   localhost com app page3 html  gt Page 3 lt  option gt   lt  select gt    Javascript using jquery      select location   on  change   function       window location     this  val          now you will able to reuse this function by adding  select location class to any Select element class

[html] Redirect on select option in select box

Examples related to html

Examples related to action

Examples related to onchange