Как добавить еще один динамический набор кодов для этого кода

Question

Я использую этот код plugin от CSS-Tricks для php/mysql/jquery двух прикованных блоков с использованием PHP, jQuery и Mysql. Я рассматриваю возможность добавления дополнительного поля, выбор которого зависит от первого и второго ящиков. Я попытался реплицировать и модифицировать вторую половину обработчика getter.php и JS-кода, но, конечно, это не удалось. Нужно ли для некоторых и будущих фреймов использовать IF-инструкции, чтобы заставить его работать?

Getter.php:

<?php 

$username = "username"; 
$password = "password"; 
$hostname = "localhost"; 

$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL"); 
$selected = mysql_select_db("dropdownvalues", $dbhandle) or die("Could not select examples"); 
$choice = mysql_real_escape_string($_GET['choice']); 

$query = "SELECT * FROM dd_vals WHERE category='$choice'"; 

$result = mysql_query($query); 

while ($row = mysql_fetch_array($result)) { 
    echo "<option>" . $row{'dd_val'} . "</option>"; 
} 
?> 

Код:

$("#first-choice").change(function() { 
    $("#second-choice").load("getter.php?choice=" + $("#first-choice").val()); 
}); 

HTML:

<select id="first-choice"> 
    <option selected value="base">Please Select</option> 
    <option value="beverages">Beverages</option> 
    <option value="snacks">Snacks</option> 
</select> 

<br /> 

<select id="second-choice"> 
    <option>Please choose from above</option> 
</select> 

Answer 1

Вы можете попробовать этот тип метода

$(document).ready(function() { 
    $("#first-choice").change(function() { 
     var value = $(this).val(); 
     $.ajax({ 
      type : "GET", 
      url : 'getter.php', 
      data : { 
       choice : value 
      }, 
      success : function(data){ 
       $('#second-choice').html(data); 
       $('#third-choice').html('<option>Select second option</option>'); 
      } 
     }) 
    }); 
    $("#second-choice").change(function() { 
     var first_value = $("#first-choice").val(); 
     var value = $(this).val(); 
     $.ajax({ 
      type : "GET", 
      url : 'getter2.php', 
      data : { 
       choice : first_value, 
       second : value 
      }, 
      success : function(data){ 
       $('#third-choice').html(data); 
      } 
     }); 
    }); 
}); 

Answer 2

Пусть следующий HTML код записывается в page.php

<div class="result"></div> 
<select id="first-choice"> 
    <option selected value="-1">Please Select</option> 
    <option value="beverages">Beverages</option> 
    <option value="snacks">Snacks</option> 
</select> 

<br /> 

<select id="second-choice"> 
    <option value="-1">Please Select</option> 
</select> 

<select id="third-choice"> 
    <option value="-1">Please Select</option> 
</select> 

в page.php, у вас есть следующий код JavaScript:

<script type="text/javascript"> 


    $(document).ready(function(){ 

    $("#first-choice").change(function(){ 


    var first-choice=$.trim($("#first-choice").val()); 

    if(first-choice==-1){ 


    $(".result").html('<span>first choice not selected</span>'); 


    }else{ 

    $(".result").html('<span>Please wait...</span>'); 

    $.ajax({ 

    type:"POST", 
    url:"page_1.php", 
    data:"first_choice="+first-choice, 
    success:function(response){ 

    $("#second-choice").html(response); 

    $(".result").html(''); 

    }, 
    error:function(response){ 


    alert("error occurred"); 




} 

});

} 


}); 



}); 



</script> 

в page_1.php, у вас есть:

<?php 

    $first_choice = trim($_POST['first_choice']); 

    $username = "username"; 
$password = "password"; 
$hostname = "localhost"; 

$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL"); 
$selected = mysql_select_db("dropdownvalues", $dbhandle) or die("Could not select examples"); 
// $choice = mysql_real_escape_string($_GET['choice']); 

//$query = "SELECT * FROM dd_vals WHERE category='$choice'"; **Write it as you need** 

$result = mysql_query($query); 

echo ' <option selected value="-1">Please Select</option>'; 
while ($row = mysql_fetch_array($result)) { 
    echo '<option value="'.$row['id'].'">' . trim(htmlspecialchars_decode($row['dd_val'])) . '</option>'; 
} 

    ?> 











    $(document).ready(function(){ 

$ ("# второй-выбор") изменить (функция() {

var first_choice= $.trim($("#first-choice").val());  
var second-choice= $.trim($("#second-choice").val()); 

    $(".result").html('<span>Please wait...</span>'); 

      $.ajax({ 

    type:"POST", 
    url:"page_2.php", 
    data:"first_choice="+first-choice+"&second_choice="+second-choice, 
    success:function(response){ 

    $("#third-choice").html(response); 

    $(".result").html(''); 

    }, 
    error:function(response){ 


    alert("error occurred"); 


    } 

    }); 


    }); 


    }); 

в page_2.php у вас есть:.

<?php 
$second_choice=trim($_POST['second_choice']); 

//now do as you did in page_1.php to fetch data from DB and echo them as `options`s 


?> 

Не забудьте использовать тег <script/>, когда вы используете javascript. Что касается используемого кода php, я скопировал (не протестировал) ваш код с модификацией.

EDIT:

добавил & перед тем second_choice="+second-choice,