0

The redirection is working fine with the html code below however I just want it to redirect the last option value "Facebook" and just do nothing when the other options are selected.

    <select onchange="location = this.options[this.selectedIndex].value;">
        <option>Please select</option>
        <option value="Apple">Apple</option>
        <option value="BBC">BBC</option>
        <option value="http://www.facebook.com">Facebook</option>
    </select>​

Thank you,

user8160389
  • 15
  • 4
  • Use a JavaScript function and put it into the onchange instead. Then you can work better with the logic of the situation and decide what to do. – adprocas Apr 30 '18 at 12:20
  • 1
    Please check it out. [Same question asked](https://stackoverflow.com/questions/6418634/onclick-location-href-link-html-does-not-load-page-in-safari) – Waseem Bashir Apr 30 '18 at 12:20

3 Answers3

0

Here is your solution: 

    <select onchange="(this.selectedIndex == 3) ? location =  this.options[this.selectedIndex].value : '';">
        <option>Please select</option>
        <option value="Apple">Apple</option>
        <option value="BBC">BBC</option>
        <option value="http://www.facebook.com">Facebook</option>
    </select>​

Cautions: The developer will have to know and remember to change that index if something is added. It is code that will break things if something is changed. If it is decided that it will always be the last one, but then someone forgets and changes it so it isn't, what would happen if you decided to just use the last index? What if we want more than one to redirect later on? Including a bunch of logic in the attribute isn't advisable, and a better way to know when to redirect is needed in order to make code that will break less often, instead of using hard coded indexes.

Himanshu Upadhyay
  • 6,558
  • 1
  • 20
  • 33
  • What happens if we add another option below BBC? – adprocas Apr 30 '18 at 12:38
  • Then the index comparison should be set accordingly. Or if it is fixed that facebook one will be the last one always then we can change the logic for that. – Himanshu Upadhyay Apr 30 '18 at 12:40
  • The developer will have to know and remember to change that index if something is added. It is code that will break things if something is changed. If it is decided that it will always be the last one, but then someone forgets and changes it so it isn't, what would happen if you decided to just use the last index? What if we want more than one to redirect later on? Including a bunch of logic in the attribute isn't advisable, and a better way to know when to redirect is needed in order to make code that will break less often, instead of using hard coded indexes. – adprocas Apr 30 '18 at 12:46
  • OP is not asking for ideal coding practice. He wants a solution and my answer solves it. So I think it does not deserve a negative vote. – Himanshu Upadhyay Apr 30 '18 at 12:59
  • Our answers should point out possible shortcomings or catches when we provide an answer. In the guide it says `Any answer that gets the asker going in the right direction is helpful, but do try to mention any limitations, assumptions or simplifications in your answer. Brevity is acceptable, but fuller explanations are better.` So, I have uncovered some possible future issues with your code. Your answer doesn't mention or address these issues. Edit your answer to explain the pitfalls and limitations to this approach and then I'll remove the downvote. – adprocas Apr 30 '18 at 13:08
0

It's best to put this into a separate JavaScript function.

I've made this more change safe as well. If you add the data-redirect attribute, for example, and only allow redirects when it's set to 1, you will be able to have multiple items with redirects without having to rely on them being at specific indexes. So, if the HTML changes the order, or something is added, it won't break.

Like this:

function doChange(selectBox) {
  if(selectBox.options[selectBox.selectedIndex].dataset.redirect == 1) {
     location = selectBox.options[selectBox.selectedIndex].value;
  }
};
<select onchange="doChange(this);">
        <option>Please select</option>
        <option value="Apple" data-redirect="0">Apple</option>
        <option value="BBC" data-redirect="0">BBC</option>
        <option value="http://www.facebook.com" data-redirect="1">Facebook</option>
    </select>​
adprocas
  • 1,863
  • 1
  • 14
  • 31
0

It it possible to do this using Javascript function

function changeLocation(_option)
{
  // check if option selected is "Facebook" or not
  if (_option.innerHTML == "Facebook")
  {
    // option selected is "Facebook"
    return _option.value ;
  }
  else
  {
    // "Facebook" is not selected option
    return "#" ;
  }
}
<select onchange="location = changeLocation(this.options[this.selectedIndex]);">
        <option>Please select</option>
        <option value="Apple">Apple</option>
        <option value="BBC">BBC</option>
        <option value="http://www.facebook.com">Facebook</option>
    </select>