使用ajax和PHP填充基于第一个选择框的第二个选择框

时间:2016-07-04 17:37:03

标签: javascript php jquery ajax mysqli

我在这里有点疯狂。我知道之前已经回答了几次,但我似乎无法得到它。我必须遗漏一些非常明显的东西。

我需要根据第一个选择输入的选择从DB动态填充第二个选择输入的选项。我测试了getShowByBand.php代码并生成了预期的结果。我的猜测是问题在于javascript文件。请查看我的代码,看看你是否可以提供帮助。

testForm.php

  <form role="form">
    <div class="well" id="generalIDRows">
      <div class="row">
        <div class="col-md-6 padding-top-10">
          <div class="form-group">
            <label for="band">Choose Band:</label>
            <select id="band" name="band" class="form-control">
              <option value="">Band Name</option>
              <?php 
                       $sql = "SELECT bandID,bandName FROM Band";
                           $bandq = mysqli_query($link, $sql);                  
                       while($row = mysqli_fetch_array($bandq))
                 {
                $band_ID=$row["bandID"];
                $band=$row["bandName"];                     
                echo '<option value="' . $band_ID . '">' . $band .'</option>';
                 }
              ?>
            </select>
            <script src="js/getShowByBand.js" type="text/javascript"></script>
          </div>
        </div>
        <div class="col-md-6 padding-top-10">
          <div class="form-group">
            <label for="show">Choose Show:</label>
            <select id="show" name="show" class="form-control">
              <option value="">--Select Show--</option>
            </select>
          </div>
        </div>
      </div>
    </div>
  </form>

getShowByBand.js

$(document).ready(function()
{
 $(".band").change(function()
 {
  var id=$(this).val();
  var dataString = 'id='+ id;

  $.ajax
  ({
   type: "POST",
   url: "womhScripts/getShowByBand.php",
   data: dataString,
   cache: false,
   success: function(html)
   {
      $(".show").html(html);
   } 
   });
  });
});

getShowByBand.php

<?php
$link=mysqli_connect("localhost","womhproduction","Derkadeepd0ng","womh");
if (mysqli_connect_errno())
    echo "failed to connect" . mysqli_connect_error();
if($_POST)
{
    $id=$_POST['id'];
    $showSQL = mysqli_query($link,"SELECT showID FROM Act WHERE bandID =" . $id . ";");
    $showResults = mysqli_num_rows($showSQL);
    if($showResults > 0)
    {
        echo "<option selected disabled>--Select show--</option>";
        while($showRow = mysqli_fetch_array($showSQL))
        { 
            $showID= $showRow['showID'];
            $showNameSQL = mysqli_query($link, "SELECT showName FROM Shows WHERE showID=". $showID . ";");
            $showNameResults = mysqli_num_rows($showNameSQL);
            if($showNameResults > 0)
            {
                while($showNameRow = mysqli_fetch_array($showNameSQL))
                {
                    $showName = $showNameRow['showName']; 
                    echo '<option value= "' . $showID . '">' . $showName . '</option>';
                }       
            }     
        }       
    } 
}
?>

2 个答案:

答案 0 :(得分:2)

尝试将此$(“。band”)更改为您要调用的javascript上的$(“#band”)更改为您应该通过id执行的课程。

答案 1 :(得分:2)

使用$("#band").change ...点用于选择类。