如何在动态附加div中填充ajax中的下拉列表 [英] How to populate a dropdown in ajax which itself in a dynamic appended div

问题描述

Ajax代码：

Ajax code:

$(document).ready(function () {
 	var counter = 0;
	$("#addButton").click(function () {
            if (counter > 19) {
                alert("Only 20 Address allowed");
                return false;
            }
			
			 
        var elems = '<div class="col-lg-5"  id="Address' + counter + '">'+
              '<textarea class="form-control" name="alt_address[]" rows="3" placeholder="Address' + (counter+1) + '" /><div class="col-lg-6 form-group col-lg-offset-6"> </div>' +
			  '<div class="col-lg-3 form-group" id="city' + counter + '">'+
			  '<select name="city_name[]" id="city_name' + counter + '" class="form-control"></select>' +
			  '</div><div class="col-lg-3 form-group"><select name="locality_name[]" id="locality_name' + counter + '" class="form-control"><option value="" selected="selected" >Select Locality</option></select></div></div>' + 
              '<div class="col-lg-1 form-group">'+
              '<button type="button" class="removebtn" id="removeButton' + counter + '">' +
			  '<span class="glyphicon glyphicon-minus"></span></button>' +
			  '</div><div class="col-lg-6 form-group col-lg-offset-6"> </div>' ;
			
        
		$('#addressDiv').append(elems);
                  
            counter++;
			
			
			 $.ajax({

            type:"Post",

            url:"city_load.php",
 
			cache:"false",

            success:function(html){
                alert("test");
                $("#city_name" + counter).html(html);

            }

            });
			 			
			 return false;
			 });
			 
			 $("#city_name" + counter).change(function(){

        

        $city_id = $(this).val();

        

        $.ajax({

            type:"Post",

            url:"ajax-dd3ck.php",

            data:"city_id="+$city_id,

            cache:"false",

            success:function(html){

                $("#locality_name" + counter).html(html);

            }

            });

        });

    
					
					$(document).on('click','.removebtn',function () {
					
					if(counter==0){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#Address" + counter).remove();
		$("#removeButton" + counter).remove();
		

      
	  
		
		
    });

    
});
  </script>      

<?php
include("db.php");
        $sql="select * from city";

                    $res=mysqli_query($con,$sql);
                    while($row=mysqli_fetch_array($res))
                    {

                   echo "<option value='$row[city_id]'>$row[city_name]</option>";

                     }

?>

推荐答案

（ document ）。ready（ function （）{
var counter = 0 ;

(document).ready(function () { var counter = 0;

（< span class =code-string> ＃addButton）。click（ function （）{
if （counter> 19 ）{
alert（< span class =code-string> 仅允许20个地址）;
return false ;
}


var elems = ' &l t; div class =col-lg-5id =Address' + counter + ' >' +
' < textarea class =form-controlname = alt_address []rows =3placeholder =Address' +（counter + 1）+ ' />< div class =col-lg-6 form-group col-lg-offset-6> < / div>' +
' < div class =col-lg- 3表格组id =city' + counter + ' > +
' < select name =city_name []id =city_name' + counter + ' class =form-control>< / select>' +
' < / div>< div class =col-lg-3 form-group>< ; select name =locality_name []id =locality_name' + counter + ' class = form-control>< option value =selected =selected>选择地点< /选项>< / select>< / div>< / div>' +
' < div class =col-lg-1 form-group> ;' +
' < button type =buttonclass =removebtnid =removeButton' + counter + ' >' +
< span class =code-string>' < span class =glyphicon glyphicon-minus>< / span>< / button>' +
' < / div>< div class =col-lg-6 form- group col-lg-offset-6> < / div>';

("#addButton").click(function () { if (counter > 19) { alert("Only 20 Address allowed"); return false; } var elems = '<div class="col-lg-5" id="Address' + counter + '">'+ '<textarea class="form-control" name="alt_address[]" rows="3" placeholder="Address' + (counter+1) + '" /><div class="col-lg-6 form-group col-lg-offset-6"> </div>' + '<div class="col-lg-3 form-group" id="city' + counter + '">'+ '<select name="city_name[]" id="city_name' + counter + '" class="form-control"></select>' + '</div><div class="col-lg-3 form-group"><select name="locality_name[]" id="locality_name' + counter + '" class="form-control"><option value="" selected="selected" >Select Locality</option></select></div></div>' + '<div class="col-lg-1 form-group">'+ '<button type="button" class="removebtn" id="removeButton' + counter + '">' + '<span class="glyphicon glyphicon-minus"></span></button>' + '</div><div class="col-lg-6 form-group col-lg-offset-6"> </div>' ;

（' ＃addressDiv 。）追加（elems的）;

counter ++;

('#addressDiv').append(elems); counter++;

这篇关于如何在动态附加div中填充ajax中的下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！