Amranur Rahman Amranur Rahman - 1 month ago 10
MySQL Question

How to Set incremental value for dropdown both in JavaScript and php while using Ajax

I am working on multi dynamic Drop-down options and try to Set incremental value when user click on add button (function use .append in JavaScript) for drop-down option both in JavaScript and php while using Ajax So need a solution for this problem:

<?php // it is use for database connection with PDO
function load_country(){
include('config.php');
$output = '';
$statement = $db->prepare("SELECT * FROM tbl_country ORDER BY country_name");
$statement->execute();
$result = $statement->fetchAll(PDO::FETCH_ASSOC);
foreach($result as $row) {
$output .= '<option value="'.$row["country_id"].'">'.$row["country_name"].'</option>';
}
return $output;
}
?>
<html> <head> <script src="jquery.js"></script> </head> //This is the form part of html
<body>
<table><input type="button" class="btn btn-primary add" value="+">
<tbody class="details">
<tr>
<td><select name="country[]" class="country"><option value="">Country</option> <?php echo load_country(); ?></select></td>
<td><select name="state[]" class="state"><option value="">state</option> </select></td>
<td><select name="money[]" class="money"><option value="">money</option></select></td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
var i = 0;
$(function(){
$('.add').click(function(){ // here add button code
var tr = '<tr>'+
'<td><select name="country[]" class="contry'+i+'"><option value="">Select Country</option> <?php echo load_country(); ?></select></td>'+
'<td><select name="state[]" class="state'+i+'"><option value="">Select state</option> </select></td>'+
'<td><select name="money[]" class="money'+i+'"><option value="">Select money</option></select></td>'+
'</tr>';
$('.details').append(tr); // append function
$(document).ready(function(){ // ajax data load for country
$('.country+i+').change(function(){
var country_id = $(this).val();
$.ajax({
url:"fetch_state.php",
method:"POST",
data:{countryId:country_id},
dataType:"text",
success:function(data) {
$('.state+i+').html(data);
}
});
});
});
$(document).ready(function(){ // ajax data load for state
$('.state+i+').change(function(){
var state_id = $(this).val();
$.ajax({
url:"fetch_money.php",
method:"POST",
data:{stateId:state_id},
dataType:"text",
success:function(data) {
$('.money+i+').html(data);
}
});
});
});
});
i++;
});
$(document).ready(function(){
$('.country').change(function(){
var country_id = $(this).val();
$.ajax({
url:"fetch_state.php",
method:"POST",
data:{countryId:country_id},
dataType:"text",
success:function(data) {
$('.state').html(data);
}
});
});
});
$(document).ready(function(){
$('.state').change(function(){
var state_id = $(this).val();
$.ajax({
url:"fetch_money.php",
method:"POST",
data:{stateId:state_id},
dataType:"text",
success:function(data) {
$('.money').html(data);
}
});
});
});
</script>


I code look huge but I try to share all that It can help you to understand my problem.
When click on Add Append function work properly but the think is drop down list doesn't work as like first one so I use incremental value as 'i'. but not working. I show a picture that you understand what I need
enter image description here
I wish you can help me. Thanks in Advance.

Answer

No need to re-generate the same js code again and again. Just use three class. You can try like this.

Here I've used some dummy options as I've no access to ajax response.

SEE DEMO

HTML:

<table><input type="button"  class="btn btn-primary add" value="+">
<tbody class="details">
 <tr>
   <td><select name="country[]" class="country"><option value="">Country</option> <option value="1">Country 1</option></select></td>
   <td><select name="state[]" class="state"><option value="">state</option><option value="1">state 1</option> </select></td>
   <td><select name="money[]" class="money"><option value="">money</option><option value="1">money 1</option></select></td>
 </tr>
</tbody>

JS:

$(document).ready(function(){
    $('.add').click(function(){ // here add button code
        var tr = '<tr>'+
                 '<td><select name="country[]" class="country"><option value="">Country</option> <option value="1">Country 1</option> <?php echo load_country(); ?></select></td>'+
                 '<td><select name="state[]" class="state"><option value="">state</option><option value="1">state 1</option> </select></td>'+
                 '<td><select name="money[]" class="money"><option value="">Select money</option></select></td>'+
                 '</tr>';
    $('.details').append(tr); // append function

    });

  $(document).on('change', '.country', function(){
       var country_id = $(this).val();
       var _this = $(this).parents("tr").find(".state");

       $.ajax({
            url:"fetch_state.php",  
            method:"POST",  
            data:{countryId:country_id}, 
            dataType:"text",  
            success:function(data) {

                 $(_this).html(data); 
            }  
       });  
  });  
  $(document).on('change', '.state', function(){  
       var state_id = $(this).val();
        var _this = $(this).parents("tr").find(".money");
       $.ajax({  
            url:"fetch_money.php",  
            method:"POST",   
            data:{stateId:state_id},  
            dataType:"text",  
            success:function(data) {  
                 $(_this).html(data);  
            }  
       });  
  });  
 }); 

And remember, it's better to write like this:

$(document).on('change', '.country', function(){
    .............
    ............
});

Instead of:

$('.country').change(function(){  
    .............
    ............
});