Question

我有1种形式，里面有2种选择。我需要更改表单提交操作URL，这取决于2个select输入的值的更改。应在按钮单击时提交表单。这是我的代码，我可以获取更改后的选择输入的值，但是卡住了如何使其按需运行并使其简短代码+正确

$(document).ready(function() {
  $('#myform').submit(function(event) {

    event.preventDefault();

    var select1_val = $("#select1").val();
    var select2_val = $("#select2").val();

    alert(select1_val + select2_val);

    if (select1_val == '1-1' && select2_val == '2-1') {
      var url = 'example.html';
    } else if (select1_val == '1-2' && select2_val == '2-2') {
      var url = 'example2.html';
    }
    $('#myform').attr('action', url);

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="myform">
  <select id="select1">
    <option value="">Select</option>
    <option value="1-1">Something 1</option>
    <option value="1-2">Something 2</option>
  </select>

  <select id="select2">
    <option value="">Select</option>
    <option value="2-1">Something 1</option>
    <option value="2-2">Something 2</option>
  </select>

  <button id='submitBTN'>Search</button>
  <form>

Answer 1

不确定要验证的内容，但我只是尝试基于2种验证来开发基本内容。

如果其中任何一个为空，则不执行任何操作。
如果它们都不为空，则进行验证检查并相应地更改url。

$(document).ready(function() {
  $('#select1').on('change', function(){urlValidation()});
  $('#select2').on('change', function(){urlValidation()});
});

function urlValidation() {
  var val1 = $('#select1').val();
  var val2 = $('#select2').val();
  
  if (val1 === "" || val2 === "") {
    // Do nothing
     alert ("Doing Nothing!");
  } else if (val1 != "" && val2 != "") {
    if (val1 === "1-1") {
      // Next step validation to check select2 value and apply URL
      if (val2 === "2-1") {
        $('#myForm').attr('action', '1-1-2-1.html');
      } if (val2 === "2-2") {
        $('#myForm').attr('action', '1-1-2-2.html');
      }
    } else if (val1 === "1-2") {
      // Next step validation to check select2 value and apply URL
      if (val2 === "2-1") {
        $('#myForm').attr('action', '1-2-2-1.html');
      } if (val2 === "2-2") {
        $('#myForm').attr('action', '1-2-2-2.html');
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="depend_on_selections.html" id="myForm">
  <select id="select1">
    <option value="">Select</option>
    <option value="1-1">Something 1</option>
    <option value="1-2">Something 2</option>
  </select>

  <select id="select2">
    <option value="">Select</option>
    <option value="2-1">Something 1</option>
    <option value="2-2">Something 2</option>
  </select>

  <button id='submitBTN'>Search</button>
<form>

Answer 2

我修复了我的代码。最好的方法是获取选择输入的值，并在Jquery代码中写条件if和else if之后，获取URL取决于条件并由jquery将其写入attr。这是工作代码

$(document).ready(function() {
  $('#myform').submit(function(event) {

    var select1_val = $("#select1").val();
    var select2_val = $("#select2").val();

    if (select1_val === "" || select2_val === "") {
      event.preventDefault();
    } else {
      //alert(select1_val + select2_val);

      if (select1_val == '1-1' && select2_val == '2-1') {
        var url = 'example.html';
      } else if (select1_val == '1-2' && select2_val == '2-2') {
        var url = 'example2.html';
      }

      //alert(url);
      $('#myform').attr('action', '/' + url);
    }
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="myform">
  <select id="select1">
    <option value="">Select</option>
    <option value="1-1">Something 1</option>
    <option value="1-2">Something 2</option>
  </select>

  <select id="select2">
    <option value="">Select</option>
    <option value="2-1">Something 1</option>
    <option value="2-2">Something 2</option>
  </select>

  <button id='submitBTN'>Search</button>
  <form>

根据2个选择值设置表单提交操作

2 个答案: