javascript - 具有 2 个操作的提交按钮取决于下拉菜单

Question

我正在尝试弄清楚如何根据从 MySQL 获得的下拉列表通过两个操作提交按钮。一个是更新到数据库然后进入下一页，而其他操作是进入特定页面。我已经尝试了所有的解决方案，但大多数都只有几个下拉菜单，我的有 40 个菜单。

这是我的 JavaScript

<script type='text/javascript'>
$(window).load(function(){
    //$(document).ready(function() {
      <!--To Enable button "MULA"-->
     $('#lst_respon').change(function() {
        if ($(this).find(":selected").val()!='11') {
            $('#button').attr('disabled',true);
        } else {
            $('#button').removeAttr('disabled');
        }
      });

      $('#lst_respon').change(function()
       {
           $('#form1').submit();
       });
}); 

function changeTextBox()
{
     var val=$('#lst_respon').val();


  if(val==='11')
  {
     $('#value').prop('disabled', true);


  }
  else{$('#value').removeAttr("disabled");}
}
</script>

这是我的 HTML

    <div align="center">
    <table width="60%" border="1" class="zui-table">
    <thead>
    <tr>
    <th colspan="3" align="center">Status</th>
    </tr>
    </thead>
    <tr>
    <?php 

     $smt = $conn->prepare('select * From lookup_caraterima');
     $smt->execute();
     $data = $smt->fetchAll();

     $smt2 = $conn->prepare('select * From lookup_kodrespon');
     $smt2->execute();
     $data2 = $smt2->fetchAll();

     ?>
     <td width="253">Cara Terima</td>
     <td width="5">:</td>
     <td width="164">
     <select name="lst_cterima" id="lst_cterima">
     <?php foreach ($data as $row): ?>
     <option value="<? echo $row["kodterima"];?>"><? echo $row["jenis"];?> 
     </option>
     <?php endforeach ?>
     </select>
     </td>
     </tr>
     <tr>
     <td>Kod Respon</td>
     <td>:</td>
     <td>
     <select name="lst_respon" id="lst_respon"   onchange="changeTextBox()">
     <?php foreach ($data2 as $row2): ?>

     <option value="<? echo $row2["kod"];?>"><? echo $row2["kod"].'-  '.$row2 ["Keterangan"];?></option>
    <?php endforeach ?>
    </select></td>
    </tr>
    <tr>
    <td><label for ="sebab">Sebab</label></td>
    <td>:</td>
    <td><input type="textbox" id="value" size="100" disabled</td>
    </tr>
    <tr>
    <td colspan="3" align="center"><form name="form1" method="post"  action="main.php?load=4&SerialID=<?php echo $noSiri; ?>&month=<?php echo  $monthA;?>&year=<?php  echo $yearA;?>&tab=A">
    <input type="submit" name="button" id="button" value="Teruskan"  class="myButton">
    </form></td>
    </tr>
    </table>
    </div>

Answer 1

对于基于下拉选择提交表单的自动化解决方案，您可以尝试使用 data 属性，例如:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<form id="tester">
    <select name="test">
        <option value="best" data-instructions='<?php echo json_encode(array('action'=>'page1')); ?>'>Best</option>
        <option value="rest" data-instructions='<?php echo json_encode(array('action'=>'page2')); ?>'>Rest</option>
        <option value="guest" data-instructions='<?php echo json_encode(array('action'=>'page3')); ?>'>Guest</option>
        <option value="lest" data-instructions='<?php echo json_encode(array('action'=>'page4')); ?>'>Lest</option>
    </select>
    <input type="submit" name="submit" value="SUBMIT" />
</form>
<script>
$(document).ready(function() {
    $('#tester').submit(function(e) {
        // Stop form from submitting
        e.preventDefault();
        // Get the select dropdown
        var thisSelect  =   $(this).find('select[name=test]');
        // Get the value
        var thisVal     =   thisSelect.val();
        // Get the options separately
        var thisOpts    =   thisSelect.children();
        // Create a holder
        var thisData    =   {};
        // Loop through the options
        $.each(thisOpts,function(k,v) {
            // Get the current value
            var currVal =   $(v).attr('value');
            // If the current value is the same as the value selected
            if(currVal == thisVal) {
                // Get the instructions from the option
                thisData    =   $(v).data('instructions');
                // Stop looping
                return false
            }
        });

        console.log(thisData);
    });
});
</script>

提交时，选择会给你一个对象，你可以用它来指导如何提交表单:

// thisData.action
{action: "page2"}