Redirect on select option in select box

Question

At the moment I am using this:

<select ONCHANGE="location = this.options[this.selectedIndex].value;">

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?

Answer 1

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/

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
  <option value="">Select...</option>
  <option value="https://google.com">Google</option>
  <option value="https://yahoo.com">Yahoo</option>
</select>

Answer 2

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

Answer 3

to make it as globally reuse function using jquery

HTML

<select class="select_location">
   <option value="http://localhost.com/app/page1.html">Page 1</option>
   <option value="http://localhost.com/app/page2.html">Page 2</option>
   <option value="http://localhost.com/app/page3.html">Page 3</option>
</select>

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

Answer 4

For someone who doesn't want to use inline JS.

<select data-select-name>
    <option value="">Select...</option>
    <option value="http://google.com">Google</option>
    <option value="http://yahoo.com">Yahoo</option>
</select>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded',function() {
        document.querySelector('select[data-select-name]').onchange=changeEventHandler;
    },false);

    function changeEventHandler(event) {
        window.location.href = this.options[this.selectedIndex].value;
    }
</script>

Answer 5

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>

Answer 6

    {{-- dynamic select/dropdown --}}
    <select class="form-control m-bot15" name="district_id" 
        onchange ="location = this.options[this.selectedIndex].value;"
        >
          <option value="">--Select--</option>
          <option value="?">All</option>

            @foreach($location as $district)
                <option  value="?district_id={{ $district->district_id }}" >
                  {{ $district->district }}
                </option> 
            @endforeach   

    </select>

Answer 7

<select onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);">
  <option value="">Select...</option>
  <option value="https://reactjs.org/">React Js</option>
  <option value="https://angularjs.org/">Angular Js</option>
</select>

Answer 8

So, I found interesting following solution using redirect without js. On pure css. You just should skip of <select> using.

ul{
    font-family: Arial, Verdana; 
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
    position: relative;
    top: 8px;
    width: 120px;
    text-decoration: none;
    color: #ffffff;
    padding: 5px 15px 5px 15px;
    background: #000;
    margin-left: 1px;
    white-space: nowrap;
}

ul li{
    display: block;
    position: relative;
    float: left;
    width: 120px;
}

li ul{
    display: none;
}

ul li a{
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 5px 15px 5px 15px;
    background: #000;
    margin-left: 1px;
    white-space: nowrap;
}

ul li a:hover{
    background: #000;
}
li:hover ul{
    display: block;
    position: absolute;
    left: -16px;
    top: -5px;
}

li:hover li{
    float: none;
    font-size: 11px;
}

li:hover a{
    background: #000;
}

li:hover li a:hover{
    background: #95A9B1;
    color: #000;
}

<ul id="menu">
  <li>
    Engines 
    <ul>
      <li><a href="https://www.google.com/">Google</a></li>
      <li><a href="https://search.yahoo.com/">Yahoo</a></li>
      <li><a href="https://www.bing.com/">Bing</a></li>
    </ul>
  </li>
</ul>