我如何在按钮单击上运行选项并向该选项添加功能

Question

基本上我想要做的是，如果从下拉菜单中选择 GATE1，则在单击按钮时运行 evinar() 函数，否则，如果从下拉菜单中选择 GATE2，则在单击按钮时运行 evinar2 函数。<select name="gates" id="gates">  <option value="gates">GATES</option>  <option value="1">GATE1</option>  <option value="2">GATE2</option></select><button class="btn btn-primary" style="width: 360px; outline: none;" id="testar" onclick="enviar()">➤「Start」</button> <script title="ajax do checker">    function enviar() {      var linha = $("#lista").val();      var linhaenviar = linha.split("\n");      var total = linhaenviar.length;      var ap = 0;      var rp = 0;      linhaenviar.forEach(function(value, index) {        setTimeout(          function() {            $.ajax({              url: 'api.php?lista=' + value,              type: 'GET',              async: true,              success: function(resultado) {                if (resultado.match("#Approved")) {                  removelinha();                  ap++;                  aprovadas(resultado + "");                } else {                  removelinha();                  rp++;                  reprovadas(resultado + "");                }                $('#carregadas').html(total);                var fila = parseInt(ap) + parseInt(rp);                $('#cLive').html(ap);                $('#cDie').html(rp);                $('#total').html(fila);                $('#cLive2').html(ap);                $('#cDie2').html(rp);              }            });          }, 2500 * index);      });    }    function evinar2() {      var linha = $("#lista").val();      var linhaenviar = linha.split("\n");      var total = linhaenviar.length;      var ap = 0;      var rp = 0;</script>

Answer 1

有多种方法可以解决这个问题，具体取决于您想要如何解决它。如果此按钮单击与提交表单相同，则可能需要序列化表单数据，并获取此字段的值。

否则，您将通过 id 选择字段并获取其值。通常，我会创建第三个在单击时触发的函数。新函数将获取字段值，然后根据该值调用任一函数。查看Codepen。

<select name="gates" id="gates">

  <option value="gates">GATES</option>

  <option value="1">GATE1</option>

  <option value="2">GATE2</option>

</select>

<button onclick="functionSelector()">➤「Start」</button>

<script>

// this function will route your request

function functionSelector() {

  var e = document.getElementById("gates");

  var value = e.options[e.selectedIndex].value;

  if(value === "1")

    enviar();

  else if (value === "2")

    evinar2();

  else

    unknownOption();

}

function enviar() {

  alert('enviar')

}

function evinar2() {

  alert('enviar 2')

}

function unknownOption () {

  alert('Unexpected answer')

}

</script>

Answer 2

由于您已经在使用 jQuery，因此您可以这样做：

 $(document).ready(function() {

    $("select").on("change", function() {

      if ($(this).children("option:selected").val() == 1) {

         evinar();

      } 

      else if ($(this).children("option:selected").val() == 2) {

         evinar2();

     }

   });

 });