jQueryを使用したフォーム値のオーバーライド

Question

現在のところ、私はこのフォームを持っていて、数字5をクリック/選択するときに何をしたいのですか。フォーム内で起こっていることを別のURLにロードして無視できます。

フォーム：

<div id="reservation-widget-wrap"> 
    <div id="reservation-widget-header">Check Building Availability</div> 
    <div id="reservation-widget-content"> 
    <form action='https://www.thebookingbutton.com.au/properties' method='get'> 
    <label for='channel_code' class="caption">Select property </label> 
    <select id='channel_code' name='id'> 
    <option value='1'>One</option>    
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
    <option value='4'>Four</option> 
    <option value='5'>Five</option> 
    </select> 

Answer 1

$(document).ready(function(){ 

    $('#channel_code').change(function(){ 

     if($('#channel_code').val() == '5'){ 

      window.location.href = 'Your URL'; 

     } 

    }); 

}); 

Answer 2

瞬間を取り、読み：

Decoupling Your HTML, CSS, and JavaScript - Philip Walton (Engineer @ Google)

を言われて、私はそれが好きで書くということ：Htmlの

更新

<select id='channel_code' name='id' class="js-url-redirect"> 
    <option value='1'>One</option>    
    <option value='2'>Two</option> 
    <option value='3'>Three</option> 
    <option value='4' data-url-redirect="http://bing.com">Four</option> 
    <option value='5' data-url-redirect="http://google.com">Five</option> 
</select> 

jQueryの（ジャバスクリプト）

$(document).ready(function() { 
    $('.js-url-redirect').on('change', function() { 
    var url = $(this).find(":selected").data("url-redirect"); 
    if (url && url.length > 0) { 
     window.location.href = url; 
    } 
    }); 
}); 

切り離さニース、再利用可能なコンポーネント。