드롭 다운 메뉴에 하이퍼 링크를 추가하는 방법

Question

dropdron 메뉴에 하이퍼 링크를 추가하려고합니다. 메뉴는 동적으로 생성되었지만 마지막 옵션 값과 텍스트는 항상 '새 작업 추가'가됩니다. 사용 옵션을 클릭하면 페이지가 리디렉션되기를 원합니다. 나는 Google을 가지고 있지만 아직 좋은 해결책을 찾지 못했습니다.

<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

. 드롭 다운의 변경 이벤트를 파악한 다음 값이 링크인지 확인하고 사용자를 해당 주소로 리디렉션하려는 경우가 많습니다. 적어도 그 일을하는 한 가지 방법입니다.

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