如何在下拉菜單上添加超鏈接

Question

我正在嘗試將超鏈接添加到dropdron菜單。該菜單是動態創建的，但最後一個選項值和文本總是會「添加新作業」。我希望頁面在用戶點擊該選項時重定向。我有谷歌它，但還沒有找到一個好的解決方案呢。

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

Answer 1

實現一個點擊處理程序，並檢查選擇的選項和重定向的價值，

DEMO

嘗試，

$(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); 
    } 
}); 

Answer 2

也許是這樣的：

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

Answer 3

你將不得不使用JavaScript來此。更有可能的是，您需要捕捉下拉列表中的更改事件，然後檢查該值是否爲鏈接並將您的用戶重定向到該地址。至少這是做到這一點的一種方式。

Answer 4

<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"; 
    } 
});