Javascript-基于下拉选择转到URL(续！）

Javascript - Goto URL based on Drop Down Selections (continued!)

本文关键字：URL 于下拉 选择 Javascript-      更新时间：2023-09-26

从这里继续：Javascript/jQuery-基于下拉选择转到URL

一些很棒的人给了我一些代码示例，但我在示例表单中的代码插入位置上遇到了真正的麻烦

有人能告诉我上一个问题位置中提供的代码应该在表格中添加到哪里才能正常工作吗？

在JavaScript文件的某个位置，您需要将函数绑定到表单的onsubmit事件，这样它就可以执行您想要的任何操作。

如果您正在使用jQuery，请执行以下操作：

$(function(){
  $('form').submit(function(e){
      window.location.href = $('#dd1').val() +
                             $('#dd2').val()+
                             $('#dd3').val();
      e.preventDefault();
    });
});

请在此处查看它的工作原理：http://jsfiddle.net/WDtGK/2/

为上下文添加了HTML

 <form>
      <select class="dropdown" id="dd1">
        <option>http://</option>
        <option>ftp://</option>
        <option>https://</option>
      </select>
      <select class="dropdown" id="dd2">
        <option>google</option>
        <option>yahoo</option>
        <option>bbc</option>
        <option>hotmail</option>
      </select>
      <select class="dropdown" id="dd3">
        <option>.com</option>
        <option>.net</option>
        <option>.co.uk</option>
      </select>
      <input type="submit" name="button" id="button" value="Go!">
  </form>

 <form>
  <select class="dropdown" id="dd1" style="margin-right:10px;width:130px">
    <option>http://</option>
    <option>ftp://</option>
    <option>https://</option>
  </select>
  <select class="dropdown" id="dd2" style="margin-right:10px;width:130px">
    <option>google</option>
    <option>yahoo</option>
    <option>bbc</option>
    <option>hotmail</option>
  </select>
  <select class="dropdown" id="dd3" style="width:130px;margin-right:20px">
    <option>.com</option>
    <option>.net</option>
    <option>.co.uk</option>
  </select>
  <button id="button" type="button">GO</button> <!-- notice this change -->
  </form>

在Javascript中：

$(document).ready(function () {
      $("#button").click(function(){navigate();});
});
function navigate(){
window.location.href = $('#dd1').val() + $('#dd2').val() + $('#dd3').val();
}
相关文章：