Question

目前我有这个表格以及我想要点击/选择第5号时我想要做什么，我怎么能加载另一个网址并忽略表格中发生的事情。

表格：

  <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（javascript）

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

很好的解耦，可重复使用的组件。

使用jQuery覆盖表单值

2 个答案: