How to add hyperlink on dropdown menu

Question

I am trying to add a hyperlink to a dropdron menu. The menu was created dynamically but the last option value and text are always going to be 'add new job'. I want the page to be redirected when the use clicks that option. I have Google it but haven't found a good solution yet.

<select name='job'>
<option value='value1'>value1</option>
<option value='value2'>value2</option>
<option value='value3'>value3</option>
//the above data are generated by server-side code. 
<option value='www.sample.com'>add new job</option> 
//I want the page to be redirected to the sample.com when user click the option. 
</select>

What did you attempt and what did you google? – Marc Towler Mar 05 '12 at 22:21 — Marc Towler, Mar 05 '12 at 22:21

score 2 · Answer 1 · edited Jun 26 '16 at 08:09

2

Maybe something like:

jQuery.change('select[name=job]', function() {
  if ($(this).val() == "www.sample.com"){
      window.location.href = "www.sample.com";
    }
}

edited Jun 26 '16 at 08:09

Box Box Box Box

5,094
10
49
67

answered Mar 05 '12 at 22:20

Alexander Corwin

1,097
6
11

score 1 · Answer 2 · answered Mar 05 '12 at 22:20

1

You'll have to use JavaScript for this. More likely you'll want to catch the change event of your dropdown, then check if the value is a link and redirect your user to that address. At least that's one way of doing it.

answered Mar 05 '12 at 22:20

Leo

5,069
2
20
27

score 1 · Answer 3 · answered Mar 05 '12 at 22:22

1

<select name='job' id='job'>
  <option value='value1'>value1</option>
  <option value='value2'>value2</option>
  <option value='value3'>value3</option>
  //the above data are generated by server-side code. 
  <option value='goto-new'>add new job</option> 
  //I want the page to be redirected to the sample.com when user click the option. 
</select>



$('#job').on('change', function(e) {
  if ($this.val() == 'goto-new') {
    // put your redirection here
    window.location.href = "http://stackoverflow.com";
  }
});

answered Mar 05 '12 at 22:22

odupont

1,946
13
16

While this code snippet may solve the question, [including an explanation](https://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. Please also try not to crowd your code with explanatory comments, this reduces the readability of both the code and the explanations! – Box Box Box Box Jun 26 '16 at 08:08

Selvakumar Arumugam · Accepted Answer · 2012-03-05T22:36:22.127

Implement a click handler and check for value of the selection option and redirect,

DEMO

Try,

$(document).ready(function() {

    $('select[name="job"]').change(function() {
        var selectedVal = $(this).val();
        if (isValidURL(selectedVal)) {
            window.location.href = selectedVal;
        }
    });


  //Below function is copied from http://stackoverflow.com/a/9350644/297641
  function isValidURL(value) {
    return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value);
    }
});

How to add hyperlink on dropdown menu

4 Answers4