选择多个下拉列表后从数据库中获取值

Question

从昨天开始我一直在尝试解决这个问题，直到现在我仍在努力解决这个问题。在 2 个下拉菜单中选择后，您能否请教如何获取价值？例如，在选择 5:30 AM 后，下一个下拉菜单将获取出发时间为 5:30 AM 的分支。然后在选择分支下拉列表后，第三个下拉列表将从分支中获取所有公交车号基数和选择的时间。然后将自动显示第四个下拉菜单，即座位号，除了已经在该巴士中选择的号码。我已经尝试在这里搜索，但仍然无法获得正确的结果。

代码：

<label id="label" for="schdtime">Schedule  Time</label>
<select id="schdtime" name="schdtime" style="margin-right: 15px;">
     <option value="5:30 AM">5:30 AM</option>
     <option value="7:30 AM">7:30 AM</option>
     <option value="9:30 AM">9:30 AM</option>
     <option value="11:30 AM">11:30 AM</option>
     <option value="12:30 PM">12:30 PM</option>
     <option value="1:30 PM">1:30 PM</option>
     <option value="3:30 PM">3:30 PM</option>
     <option value="5:00 PM">5:00 PM</option>
</select>

<label id="label" for="brnch">Route</label><br>
<select id="brnch" name="brnch">
     <option disabled="disabled value="">From</option>
</select>

公交车号 选择巴士号码

<label id="label">Seat Number</label>
<select id="seatnum" name="seatnum" style="width: 100px;">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
     <option value="7">7</option>
     <option value="8">8</option>
     <option value="9">9</option>
     <option value="10">10</option>
     <option value="11">11</option>
     <option value="12">12</option>
     <option value="13">13</option>
     <option value="14">14</option>
     <option value="15">15</option>
</select>

这是我的 ajax.js：

$(document).ready(function() {
  //Change in continent dropdown list will trigger this function and
  //generate dropdown options for county dropdown
   $(document).on('change','#schdtime', function() {
    var schdtime = $(this).val();
    if(schdtime != "") {
      $.ajax({
        url:"get_data.php",
        type:'POST',
        data:{schdtime:schdtime},
        success:function(response) {
          //var resp = $.trim(response);
          if(response != '') {
            $("#brnch").removeAttr('disabled','disabled').html(response);
            $("").attr('disabled','disabled').html("<option value=''>Choose</option>");
          } else {
            $("#area, #busnum, #seatnum").attr('disabled','disabled').html("<option value=''>Choose</option>");
          }
        }
      });
    } else {
      $("#area, #busnum, #seatnum").attr('disabled','disabled').html("<option value=''>Choose</option>");
    }
  });
  $(document).on('change','#brnch', function() {
    var brnch = $(this).val();
    if(brnch != "") {
      $.ajax({
        url:"get_data.php",
        type:'POST',
        data:{brnch:brnch},
        success:function(response) {
          //var resp = $.trim(response);
          if(response != '') {
            $("#area").removeAttr('disabled','disabled').html(response);
            $("#seatnum").attr('disabled','disabled').html("<option value=''>Choose</option>");
          } else {
            $("#area, #busnum, #seatnum").attr('disabled','disabled').html("<option value=''>Choose</option>");
          }
        }
      });
    } 
    else 
    {
      $("#area, #busnum, #seatnum").attr('disabled','disabled').html("<option value=''>Choose</option>");
    }
    });
    $(document).on('change','#brnch','#schdtime', function() {
    var branch = $(this).val();
    if(brnch != "") {
      $.ajax({
        url:"get_data.php",
        type:'POST',
        data:{branch:branch},
        success:function(response) {
          //var resp = $.trim(response);
          if(response != '') {
            $("#busnum, #seatnum").removeAttr('disabled','disabled').html(response);
            $("").attr('disabled','disabled').html("<option value=''>Choose</option>");
          } else {
            $("#area, #busnum, #seatnum").attr('disabled','disabled').html("<option value=''>Choose</option>");
          }
        }
      });
    } else {
      $("#area, #busnum, #seatnum").attr('disabled','disabled').html("<option value=''>Choose</option>");
    }
  });
  //Change in coutry dropdown list will trigger this function and
  //generate dropdown options for state dropdown
  $(document).on('change','#busnum', function() {
    var busnum = $(this).val();
    if(busnum != "") {
      $.ajax({
        url:"get_data.php",
        type:'POST',
        data:{busnum:busnum},
        success:function(response) {
          //var resp = $.trim(response);
          if(response != '') {
            $("$seatnum").removeAttr('disabled','disabled').html(response);
            $("").attr('disabled','disabled').html("<option value=''>Choose</option>");
          }
          else $("#seatnum").attr('disabled','disabled').html("<option value=''>Choose</option>");
        }
      });
    } else {
      $("#seatnum").attr('disabled','disabled').html("<option value=''>Choose</option>");
    }
  });
});

然后这个为get_data.php：

<?php include('includes/connection.php');?>
<?php
if (isset($_POST['schdtime'])) 
{
  $qry1 = "SELECT * FROM branch";
  $res = mysqli_query($conn, $qry1);
  if(mysqli_num_rows($res) > 0) 
  {
    echo '<option value="">Choose</option>';
    while($row = mysqli_fetch_object($res)) 
    {
      echo '<option value="'.$row->Br_Name.'">'.$row->Br_Name.'</option>';
    }
  } 
  else 
  {
    echo '<option value="">To be added</option>';
  }
} 


if (isset($_POST['brnch'])) 
{
  $brnch = $_POST['brnch'];
  
  $qry2 = "SELECT * FROM area WHERE Ar_Cty_Mncpl ='".mysqli_real_escape_string($conn,$brnch)."' OR Ar_Descript = 'Allen'";
  $res = mysqli_query($conn, $qry2);
  if(mysqli_num_rows($res) > 0) 
  {
    echo '<option value="">Choose</option>';
    while($row = mysqli_fetch_object($res)) 
    {
      echo '<option value="'.$row->Ar_Descript.'">'.$row->Ar_Descript.'</option>';
    }
  } 
  else 
  {
    echo '<option value="">To be added</option>';
  }
}


if(isset($_POST['branch'])) 
{
  /*$schdtime = $_POST['schdtime'];*/
  $branch = $_POST['branch'];
  $qry2 = "SELECT * FROM bus WHERE Bus_Branch = '".mysqli_real_escape_string($conn,$branch)."'";
  $res = mysqli_query($conn, $qry2);
  if(mysqli_num_rows($res) > 0) 
  {
    echo '<option value="">Choose</option>';
     while($row = mysqli_fetch_object($res)) 
     {
       $spc = ' ';
        echo '<option value="'.$row->Bus_Plate_Number.'">'.$row->Bus_Plate_Number. $spc .$row->Bus_Class.'</option>';
     }
   } else 
   {
       echo '<option value="">No available bus</option>';
   }
} 

Answer 1

似乎有一种方法可以大大简化您必须完成我认为既定目标的代码。通过对 HTML 进行一些小的调整，应该可以使用单个函数来处理所有 select 菜单的 change 事件。我承认在查看上面的 Javascript 试图弄清楚什么元素名称和什么菜单以及什么 sql 是什么以及什么时，我可能会犯错误，但我认为以下内容确实显示了你可以实现链接select 菜单和根据用户选择从数据库中获取内容的目标。不过 jQuery 已经不复存在了，取而代之的是 fetch api，因为它是一个演示，所以它在同一页面上有 PHP，而不是单独的 get_data.php...

请注意，4 个 select 菜单中有 3 个具有名为 data-dependent 的数据集属性。这包含以新内容为目标的 NEXT 下拉列表的名称。第 4 个下拉列表没有此属性，因为它是链中的最后一个，因此如果从链中的较早选项中选择了新选项，则处理可以在那里停止或重新开始。

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' && isset(
        $_POST['name'],
        $_POST['value']
    )){
        ob_clean();
        /* 
            send dummy data back to emulate processing in get_data.php
            in real code you will obtain values by doing db search but
            with Prepared Statements rather than embedded variables!!!
            
            
            Your `get_data` script might be more like this perhaps:
            
            
            
            $args=$_POST['value'];
            
            switch( $_POST['name'] ){
                case 'schdtime':    #no prepared statement needed for this...
                    $sql='SELECT `Br_Name` as `field` FROM `branch`';
                    $args=false;
                break;
                
                case 'area':
                    $sql='SELECT `Ar_Descript` as `field` FROM `area` WHERE `Ar_Cty_Mncpl`=?';
                break;
                
                case 'branch':
                    $sql='SELECT `Bus_Plate_Number` as `field` FROM `bus` WHERE `Bus_Branch`=?';
                break;
            }
            
            
            if( $args ){
                $stmt=$conn->prepare($sql);
                $stmt->bind_params('s',$args);
                $stmt->execute();
                $res=$stmt->get_result();
                while( $rs=$res->fetch_object() ) printf('<option>%s',$rs->field );
            }else{
                $res=$conn->query($sql);
                while( $rs=$res->fetch_object() ) printf('<option>%s',$rs->field );
            }
            
            ##... this is completely untested ...##
            
            
            
            
            The below is ONLY to provide content for the NEXT select menu...
        */
        
        for( $i=1; $i <= 10; $i++ )printf('<option>%s - %s - %s', $_POST['name'], $_POST['value'], $i );
        exit();
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
    </head>
    <body>
        <form>
        
        
            <label>Schedule  Time
                <select class='usrselect' name='schdtime' data-dependent='area'>
                    <option disabled selected hidden>Time...
                    <option>5:30 AM
                    <option>7:30 AM
                    <option>9:30 AM
                    <option>11:30 AM
                    <option>12:30 PM
                    <option>1:30 PM
                    <option>3:30 PM
                    <option>5:00 PM
                </select>
            </label>

            <label>Area
                <select class='usrselect' name='area' data-dependent='branch' disabled>
                    <option disabled selected hidden>Area...
                </select>
            </label>
            
            <label>Route
                <select class='usrselect' name='branch' data-dependent='seatnum' disabled>
                    <option disabled selected hidden>From...
                </select>
            </label>

            <label>Seat Number
                <select class='usrselect' name='seatnum' disabled>
                    <option disabled selected hidden>Seat...
                    <option>1
                    <option>2
                    <option>3
                    <option>4
                    <option>5
                    <option>6
                    <option>7
                    <option>8
                    <option>9
                    <option>10
                    <option>11
                    <option>12
                    <option>13
                    <option>14
                    <option>15
                </select>
            </label>
        </form>
    
        <script>
            const q=(e,n=document)=>n.querySelector(e);
            const qa=(e,n=document)=>n.querySelectorAll(e);
            const url=location.href; // 'get_data.php'
            
            
            const changehandler=function(e){
                let dependent=this.dataset.dependent;
                
                if( dependent ){
                    /*
                        prepare payload to send to server
                        as a name & value. This makes it
                        easier in PHP to process as these
                        remain consistent for each request.
                    */
                    let fd=new FormData();
                        fd.set('name',this.name);
                        fd.set('value',this.value);
                    
                    /*
                        Find where in the sequence this dropdown is
                        - empty and disable those that follow in 
                        readiness for the callback to populate content
                    */
                    let col=[...qa('select.usrselect')];
                    let index=col.indexOf( this );
                    for( let i=index + 1; i < col.length; i++ ){
                        col[i].innerHTML='';
                        col[i].disabled=true;
                    }
                    
                    
                    /*
                        send the ajax request and use the response 
                        data to populate the `dependent` menu OR 
                        proceed to next stage.
                    */
                    fetch( url, { method:'post',body:fd })
                        .then(r=>r.text())
                        .then(text=>{
                            let menu=q('select[ name="'+dependent+'" ]');
                                menu.innerHTML=text;
                                menu.disabled=false;
                        })      
                }else{
                    /* The last stage.... */
                    alert( 'The user has selected from ALL dropdowns\n\n' + this.value )
                }
            };
            
            
            
            
            
            qa('select.usrselect').forEach(sel=>sel.addEventListener('change',changehandler));
        </script>

    </body>
</html>