如何在使用Ajax时在JavaScript和php中设置下拉列表的增量值_Javascript_Php_Mysql_Ajax_Pdo

如何在使用Ajax时在JavaScript和php中设置下拉列表的增量值

javascript php mysql ajax

如何在使用Ajax时在JavaScript和php中设置下拉列表的增量值,javascript,php,mysql,ajax,pdo,Javascript,Php,Mysql,Ajax,Pdo,我正在研究多动态下拉选项，并尝试在使用Ajax时在JavaScript和php中为下拉选项单击添加按钮（函数use.append in JavaScript）时设置增量值，因此需要解决此问题： <?php // it is use for database connection with PDO function load_country(){ include('config.php'); $output = ''; $statement = $db-

我正在研究多动态下拉选项，并尝试在使用Ajax时在JavaScript和php中为下拉选项单击添加按钮（函数use.append in JavaScript）时设置增量值，因此需要解决此问题：

<?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="country'+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>


//这是html的表单部分
国家
陈述
钱
var i=0；
$（函数（）{
$（'.add'）。单击（函数（）{//此处添加按钮代码
var tr=''+
“选择国家”+
“选择状态”+
“选择货币”+
'';
$（'.details'）.append（tr）；//append函数
$（document）.ready（function（）{//ajax国家/地区数据加载）
$（'.country+i+'）。更改（函数（）{
var country_id=$（this.val（）；
$.ajax({
url:“fetch_state.php”，
方法：“张贴”，
数据：{countryId:country_id}，
数据类型：“文本”，
成功：函数（数据）{
$（'.state+i+'）.html（数据）；
}  
});  
});  
});  
$（document）.ready（function（）{//ajax状态数据加载
$（'.state+i+'）.change（function（）{
var state_id=$（this.val（）；
$.ajax（{
url:“fetch_money.php”，
方法：“张贴”，
数据：{stateId:state_id}，
数据类型：“文本”，
成功：函数（数据）{
$（'.money+i+'）.html（数据）；
}  
});  
});  
});  
});
i++；
});  
$（文档）.ready（函数（）{
$（'.country'）.change（函数（）{
var country_id=$（this.val（）；
$.ajax({
url:“fetch_state.php”，
方法：“张贴”，
数据：{countryId:country_id}，
数据类型：“文本”，
成功：功能（数据）{
$（'.state'）.html（数据）；
}  
});  
});  
});  
$（文档）.ready（函数（）{
$（'.state'）.change（函数（）{
var state_id=$（this.val（）；
$.ajax（{
url:“fetch_money.php”，
方法：“张贴”，
数据：{stateId:state_id}，
数据类型：“文本”，
成功：函数（数据）{
$（'.money'）.html（数据）；
}  
});  
});  
});

我的代码看起来很庞大，但我尝试分享它可以帮助您理解我的问题的所有内容。当点击AddAppend函数时，它可以正常工作，但是ThinkIs下拉列表不能像第一个一样工作，所以我使用增量值作为“I”。但不起作用。我展示一张图片，你能理解我需要什么我希望你能帮助我。提前感谢。

使用

$('.state'+i).html(data);

$('.money'+i).html(data); 

$('.country'+i) 

$('.state'+i)

反而

$('.state+i+').html(data); 

$('.money+i+').html(data);  

$('.country+i+')

$('.state+i+')

无需反复生成相同的

js

代码。只需使用三个类。你可以这样试试

这里我使用了一些虚拟选项，因为我无法访问ajax响应

HTML:

而不是：

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

谢谢，但最后一个ajax函数？我应该用什么？对不起！我不明白。谢谢你宝贵的回答，但在你回答之前，我会先用Mahfuzur Rahman博士的回答来解决。

$(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);  
            }  
       });  
  });  
 });

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

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