使用ajax和PHP基於第一個選擇框填充第二個選擇框

Question

我在這里有點瘋了。 我知道這已經被回答過幾次了，但是我似乎無法理解。 我一定想念一些非常明顯的東西。

我需要根據第一選擇輸入的選擇從數據庫動態填充第二選擇輸入的選項。 我已經測試了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>';
                }       
            }     
        }       
    } 
}
?>

Answer 1

嘗試在您的JavaScript上將此$（“。band”）更改為$（“＃band”）此類，您應該通過id進行更改。

Answer 2

使用$("#band").change ...點用於選擇類。