HTML 表单选择与 jQuery 不起作用

HTML form select with jQuery not working

本文关键字：jQuery 不起作用 选择 表单 HTML      更新时间：2023-09-26

我使用以下代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="cars" id="dynamic_select">
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Borrowing-Power-Calculator.aspx?ID=MFAA">Borrowing Power Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Loan-Repayment-Calculator.aspx?ID=MFAA">Loan Repayment Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Lump-Sum-Repayment-Calculator.aspx?ID=MFAA">Lump Sum Repayment Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Extra_Repayment_Calculator.aspx?ID=MFAA">Extra Repayment Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Budget-Planner.aspx?ID=MFAA">Budget Planner</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Loan-Comparison-Calculator.aspx?ID=MFAA">Loan Comparison Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/How-Long-to-Repay-Calculator.aspx?ID=MFAA">How Long to Repay Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Split-Loan-Calculator.aspx?ID=MFAA">Split Loan Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Property-Selling-Cost-Calculator.aspx?ID=MFAA">Property Selling Cost Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Property-Buying-Cost-Calculator.aspx?ID=MFAA">Property Buying Cost Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Saving-Calculator.aspx?ID=MFAA">Saving Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Term-Deposit-Calculator.aspx?ID=MFAA">Term Deposit Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Stamp-Duty-Calculator.aspx?ID=MFAA">Stamp Duty Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Credit-Card-Calculator.aspx?ID=MFAA">Credit Card Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Income-Tax-Calculator.aspx?ID=MFAA">Income Tax Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Reverse-Mortgage-Calculator.aspx?ID=MFAA">Reverse Mortgage Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Leasing-Calculator.aspx?ID=MFAA">Leasing Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Home-Loan-Offset-Calculator.aspx?ID=MFAA">Home Loan Offset Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Honeymoon-Loan-Calculator.aspx?ID=MFAA">Honeymoon Loan Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Comparison-Rate-Calculator.aspx?ID=MFAA">Comparison Rate Calculator</option>
</select>
<script>
  $(function() {
    // bind change event to select
    $('#dynamic_select').on('change', function() {
      var url = $(this).val(); // get selected value
      if (url) { // require a URL
        window.location = url; // redirect
      }
      return false;
    });
  });
</script>

目前，表单的更改会将浏览器发送到URL： http://www.visionabacus.com/default.aspx?go=

我不明白需要改变什么。

你能帮忙吗？

你的代码很好。链接已断开。如果您手动输入它们，您将看到服务器端的应用程序正在进行重定向。

试试这个...

<script>
    $(function(){
      // bind change event to select
      $('#dynamic_select').on('change', function () {
          var url = $(this).find(":selected").val(); // get selected value
          if (url) { // require a URL
              window.location = url; // redirect
          }
          return false;
      });
    });
</script>

我绑了这个，它工作得很好，所以它不是代码。 

<select name="cars" id="dynamic_select">
 <option value="http://www.google.com">Borrowing Power Calculator</option>
</select>
<script>
$(function(){
  // bind change event to select
  $('#dynamic_select').on('change', function () {
      var url = $(this).val(); // get selected value
      console.log(url);
      if (url) { // require a URL
          window.location = url; // redirect
      }
      return false;
  });
});
</script>

试试这个，你的一个也可以正常工作

 <script>
  $(function() {
  // bind change event to select
  $(document).on('change','#dynamic_select', function() {
      var url = $(this).val(); // get selected value
      if (url) { // require a URL
         window.location.href = url; // redirect
      }
     return false;
   });
  });
</script>

链接在您的选项中已断开。从下面的示例中，使用第二个选项检查它。 

     <html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        $('#dynamic_select').on('change', function () {
            var url = $(this).val(); // get selected value
            if (url) { // require a URL
                window.location = url; // redirect
            }
            return false;
        });
    });
</script>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="cars" id="dynamic_select">
<option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Borrowing-Power-Calculator.aspx?ID=MFAA">Borrowing Power Calculator</option>
  <option value="http://stackoverflow.com/questions/35261589/html-form-select-with-jquery-not-working">Your Question</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Loan-Repayment-Calculator.aspx?ID=MFAA">Loan Repayment Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Lump-Sum-Repayment-Calculator.aspx?ID=MFAA">Lump Sum Repayment Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Extra_Repayment_Calculator.aspx?ID=MFAA">Extra Repayment Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Budget-Planner.aspx?ID=MFAA">Budget Planner</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Loan-Comparison-Calculator.aspx?ID=MFAA">Loan Comparison Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/How-Long-to-Repay-Calculator.aspx?ID=MFAA">How Long to Repay Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Split-Loan-Calculator.aspx?ID=MFAA">Split Loan Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Property-Selling-Cost-Calculator.aspx?ID=MFAA">Property Selling Cost Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Property-Buying-Cost-Calculator.aspx?ID=MFAA">Property Buying Cost Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Saving-Calculator.aspx?ID=MFAA">Saving Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Term-Deposit-Calculator.aspx?ID=MFAA">Term Deposit Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Stamp-Duty-Calculator.aspx?ID=MFAA">Stamp Duty Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Credit-Card-Calculator.aspx?ID=MFAA">Credit Card Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Income-Tax-Calculator.aspx?ID=MFAA">Income Tax Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Reverse-Mortgage-Calculator.aspx?ID=MFAA">Reverse Mortgage Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Leasing-Calculator.aspx?ID=MFAA">Leasing Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Home-Loan-Offset-Calculator.aspx?ID=MFAA">Home Loan Offset Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Honeymoon-Loan-Calculator.aspx?ID=MFAA">Honeymoon Loan Calculator</option>
  <option value="http://www.visionabacus.com/Australia/1/SuiteA100/640/Comparison-Rate-Calculator.aspx?ID=MFAA">Comparison Rate Calculator</option>
</select>
</body>
</html>
相关文章：