Dynamisch abhängige Auswahl mit JQuery und Ajax

Das Ziel dieses Projekts ist, dass der Benutzer "Farbe" auswählt und das zweite Dropdown-Menü nur die Mitglieder in dieser Farbgruppe anzeigt. Ich habe meine SQL-Tabelle zusammen mit meiner PHP-Seite und meiner URL-Seite gepostet.Dynamisch abhängige Auswahl mit JQuery und Ajax

Das Problem, das ich habe, ist, dass ich mein Mitglied Drop-down nicht funktionieren kann. Es nimmt keine der Mitglieder auf.

SQL:

+--------+ 
 
| Color | 
 
+--------+ 
 
| Red | 
 
| Blue | 
 
| Orange | 
 
| Black | 
 
+--------+ 
 

 
+--------+--------------+ 
 
| Color | MemberName | 
 
+--------+--------------+ 
 
| Red | Joe Bob  | 
 
| Red | Catherine | 
 
| Blue | Tommy  | 
 
| Orange | John Razks | 
 
| Black | Trevor Smith | 
 
+--------+--------------+

Mein PHP-Code:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title>Test Page</title> 
 
\t <script src="jquery.js"></script> 
 
</head> 
 

 
<body> 
 
<?php 
 
function load_Color(){ 
 
\t $conn=mysqli_connect("#connection"); 
 
\t if(!$conn){ die("Connection Failed".myslqi_connect_error()); } 
 
\t else{ 
 
\t $output=''; 
 
\t $sql = "SELECT * from Color order by Color ASC"; 
 
\t $result = mysqli_query($conn, $sql); 
 
\t while($row=mysqli_fetch_array($result)){ 
 
\t \t $output .= '<option value="'.$row["Color"].'">'.$row["Color"].'</option>'; 
 
\t } 
 
\t return $output; 
 
\t } 
 
} 
 
?> 
 
<div class="formatbody" id="formatbody"> 
 
\t \t \t <div class="category_div" id="category_div">Color: 
 
\t \t \t \t <select id="color" name="color"> 
 
\t \t \t \t \t <option value="">Select Color</option> 
 
\t \t \t \t \t \t <?php echo load_Color(); ?> 
 
\t \t \t \t </select> \t 
 
\t \t \t </div> \t 
 
\t \t \t <div class="sub_category_div" id="sub_category_div">Individual: 
 
\t \t \t \t <select name="individual" id="individual"> 
 
\t \t \t \t \t <option value="">Select Individual</option> 
 
\t \t \t \t </select> 
 
\t \t \t </div> 
 
</div> 
 
</body> 
 
</html> 
 

 
<script> 
 
$(document).ready(function(){ 
 
\t $('#color').change(function(){ 
 
\t \t var Color = $(this).val(); 
 
\t \t $.ajax({ 
 
\t \t \t url: "fetch.php", 
 
\t \t \t method: "POST", 
 
\t \t \t data:{color: Color}, 
 
\t \t \t dataType: "text", 
 
\t \t \t success: function(data) 
 
\t \t \t { 
 
\t \t \t \t $('#individual').html(data); 
 
\t \t \t } 
 
\t \t }); 
 
\t }); 
 
}); 
 
</script>

Fetch.PHP

<html> 
 
<body> 
 
<?php 
 
\t $conn=mysqli_connect("#connection"); 
 
\t if(!$conn){ die("Connection Failed".mysqli_connect_error()); } 
 
\t else{ 
 
\t $output=''; 
 
\t $sql = "SELECT MemberName from Members where Color = '".$_POST["color"]."' ORDER BY MemberName ASC"; 
 
\t $result = mysqli_query($conn, $sql); 
 
\t $output = '<option value="">Select the Individual</option>'; 
 
\t while ($row=mysqli_fetch_array($result)) 
 
\t { 
 
\t \t $output .='<option value="'.$row["MemberName"].'">'.$row["MemberName"].'</option>'; 
 
\t } 
 
\t } 
 
\t 
 
\t 
 
\t echo $output; 
 
\t ?> 
 
</body> 
 
</html>

Quelle

2017-04-03 catung555555

Nun, Sie müssen json kodieren Ihre Daten und zurück zu Ajax Erfolg Funktion senden.

hier sind die Änderungen Sie

in Ihrem PHP-Code und Jquery Ajax-Aufruf machen müssen

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test Page</title> 
    <script src="jquery.js"></script> 
</head> 

<body> 
<?php 
function load_Color(){ 
    $conn=mysqli_connect("#connection"); 
    if(!$conn){ die("Connection Failed".myslqi_connect_error()); } 
    else{ 
    $output=''; 
    $sql = "SELECT * from Color order by Color ASC"; 
    $result = mysqli_query($conn, $sql); 
    while($row=mysqli_fetch_array($result)){ 
     $output .= '<option value="'.$row["Color"].'">'.$row["Color"].'</option>'; 
    } 
    return $output; 
    } 
} 
?> 
<div class="formatbody" id="formatbody"> 
      <div class="category_div" id="category_div">Color: 
       <select id="color" name="color"> 
        <option value="">Select Color</option> 
         <?php echo load_Color(); ?> 
       </select> 
      </div> 
      <div class="sub_category_div" id="sub_category_div">Individual: 
       <select name="individual" id="individual"> 
        <option value="">Select Individual</option> 
       </select> 
      </div> 
</div> 
</body> 
</html> 

<script> 
$(document).ready(function(){ 
    $('#color').change(function(){ 
     var Color = $(this).val(); 
     $.ajax({ 
      url: "fetch.php", 
      method: "POST", 
      data:{color: Color}, 
      dataType: "text", 
      success: function(data) 
      { 
       $('#individual').html(data.select_option); 
      } 
     }); 
    }); 
}); 
</script>

Und in fetch.php

<?php 
$conn=mysqli_connect("#connection"); 
if(!$conn){ die("Connection Failed".mysqli_connect_error()); } 
else{ 
$output=array(); 
$sql = "SELECT MemberName from Members where Color = '".$_POST["color"]."' ORDER BY MemberName ASC"; 
$result = mysqli_query($conn, $sql); 
$output["select_data"] = '<option value="">Select the Individual</option>'; 
while ($row=mysqli_fetch_array($result)) 
{ 
    $output["select_data"] .='<option value="'.$row["MemberName"].'">'.$row["MemberName"].'</option>'; 
} 
} 


echo json_encode($output); 
?>

Quelle

2017-04-03 18:55:36 Sylvester

Dynamisch abhängige Auswahl mit JQuery und Ajax

Antwort

Verwandte Themen