Question

我有一个与国家/地区和城市相对应的动态下拉列表。当克隆未正常运行但克隆无法正常运行时。

  <script>
    $(document).ready(function(){
		    $(function(){
        $(".addButton").click(function(){
	
            $(this).closest("tr").clone(true).appendTo(".Delivery");
		

		
        });

        $(".deleteButton").click(function(){
		
            if ($("table tr").length != 2) {
         $("table tr:last").remove();
    }
		
        });
    });

     load_json_data('country');

     function load_json_data(id, parent_id)
     {
	    var data_id = $('#data_ids').val();
      var html_code = '';
      $.getJSON('country_state_city.json', function(data){

       html_code += '<option value="">Select '+id+'</option>';
       $.each(data, function(key, value){
        if(id == 'country')
        {
         if(value.parent_id == '0')
         {
          html_code += '<option value="'+value.id+'">'+value.name+'</option>';
         }
        }
        else
        {
         if(value.parent_id == parent_id)
         {
          html_code += '<option value="'+value.id+'">'+value.name+'</option>';
         }
        }
       });
       $('.'+id).html(html_code);
      });

     }

     $(document).on('change', '.country', function(){
      var country_id = $(this).val();
      if(country_id != '')
      {
       load_json_data('state', country_id);
      }
      else
      {
       $('.state').html('<option value="">Select state</option>');
       $('.city').html('<option value="">Select city</option>');
      }
     });
     $(document).on('change', '.state', function(){
      var state_id = $(this).val();
      if(state_id != '')
      {
       load_json_data('city', state_id);
      }
      else
      {
       $('.city').html('<option value="">Select city</option>');
      }
     });
    });
    </script>

    <!DOCTYPE html>
    <html>
     <head>
  
      <script src="https:ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
      <link rel="stylesheet" href="https:maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
      <script src="https:maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
     </head>
     <body>
    </br></br>
  
         <form method="post" action="RGAForm.php">

                <table class="Delivery">
                   <tr>
                      <th>Country Name</th>
                      <th>State Name</th>
                      <th>City Name</th>
      </tr>
    <tr>

       <td>
		    <select name="country"  class="form-control input-lg country" id="country_1 data-id="1">
			    <option value="">Select country</option>
		    </select>
       </td>
                      <td>
       <select name="state" class="form-control input-lg state"  id="state_1" data-id="1">
        <option value="">Select state</option>
       </select>
      </td>
                      <td>
       <select name="city"  class="form-control input-lg city"  id="city_1 data-id="1">
        <option value="">Select city</option>
       </select>
       </td>
               
     <td><input type="button" style="background-color:#a7cb00;" class="form-control input-lg addButton" value="add"/></td>
      <td><input type="button" style="background-color:blue;" class="form-control input-lg deleteButton" value="delete"/></td>
       </tr>
	     <tr id="append_data">
	 
	     </td>
        </table>
	
	    <input type="hidden" id="data_ids" value="2">
	    </form>
     </body>
    </html>

我正在处理国家/地区和城市的依存下拉列表并对其进行克隆。但是每次添加时，我单击第一个选择框都会清除以前所有内容的内容。请帮助我更正此代码。< / p>

jQuery依赖下拉克隆不起作用

0 个答案: