Php 填充附加表行中的下拉列表

我有一个表，当单击按钮时，可以在其中动态添加行。在每个动态行中，都有文本字段和下拉列表。使用jquery和模型中的函数从数据库填充下拉列表

剧本

我能够获取数据来填充下拉列表，但是，它没有显示在下拉列表中

图1

图2

从image1中，下拉列表数据没有显示在下拉列表中，而是显示在另一行上，我不明白它为什么这样做。但它希望每次单击按钮时都能像在图像2中一样显示它。

HTML

        your city :-
                <tr>

                  <select id="state" onchange="getCity()" >
                    <option value="na"  >Select State</option>
                      <?php
                       if (isset($state)) {
                        foreach ($state as $s) {                                            
                         echo '<option value="' . $s->id . '">' . $s->loc. '</option>';
                        }                                      
                      }  ?>
                 </select>

剧本

    function getCity(){

    var state=$('#state').val();

    $.ajax({
        url: "<?php echo base_url() ?>pms1/getCity/"+state, 
        dataType: "json",
        success: function(result){
            $('#city').html('<option>SELECT</option>');
           $.each( result, function( key, value ) {

              $('#city').append('<option value='+key+'>'+value+'</option>');
            });  
    }});

 }

---

这对Onchange有效，您可能做错的一定是HTML部分

正如Bilal和Rishi所建议的，问题在于html部分。在append函数中，循环选项必须附加到select，并为单击按钮创建的循环选项设置动态ID

---

你的逻辑是错误的..在for循环中它只附加。。。。不，我不懂你。。请您解释一下，您给每个、和标签都提供了相同的id。如果在每个按钮单击事件上都附加相同的tr，那么最好在页面加载时进行ajax调用并将其存储在变量中。这样，您就不必每次都从模型中获取记录。只需在单击按钮时附加该变量。@Rishi。。naa我正在填充数据库中的下拉列表。。但是，单击按钮后，填充的数据不会显示在下拉列表中。。它在行下方的行上显示选择标记，因此我希望在单击按钮时它与image2类似，以便所有文本字段和填充的下拉列表都在一行上。如果您觉得有帮助，请向上投票：

        your city :-
                <tr>

                  <select id="state" onchange="getCity()" >
                    <option value="na"  >Select State</option>
                      <?php
                       if (isset($state)) {
                        foreach ($state as $s) {                                            
                         echo '<option value="' . $s->id . '">' . $s->loc. '</option>';
                        }                                      
                      }  ?>
                 </select>

    function getCity(){

    var state=$('#state').val();

    $.ajax({
        url: "<?php echo base_url() ?>pms1/getCity/"+state, 
        dataType: "json",
        success: function(result){
            $('#city').html('<option>SELECT</option>');
           $.each( result, function( key, value ) {

              $('#city').append('<option value='+key+'>'+value+'</option>');
            });  
    }});

 }

$('td #add_fields').click(function(){
item_count++;
 var url = baseURL+'interfaces/population';
$.ajax({           
        type: "GET",
        url: url,                           
        data:'',
        dataType: 'json',       
        success: function(res){
        $('#item_body').append('<tr id="item_row_add'+item_count+'">'+
        '<th>'+item_count+'</th>'+
        '<td>'+
        '<select class="form-control" id="item_name" name="item_name" style=" width:150px;">'+
        '<option value="none" selected="" disabled="">Select Item</option>');
         for(i in res){ 
        $('#item_row_add'+item_count+' select').append('<option value="'+res[i].id+'">'+res[i].item_name+'</option>');}
        $('#item_row_add'+item_count+'').append('</select>'+
        '</td>'+
        '<td><input type="text" name="qty_unit" id="qty_unit" class="form-control"></td>'+
        '<td><input type="text" name="price_p_u"  id="price_p_u" class="form-control"></td>'+
        '<td>'+
        '<select name="unit-type" id="unit-type" class="form-control" style=" width:90px;">'+
        '<option value="Unit">Unit</option>'+
        '<option value="Sub-Unit">Sub-Unit</option>'+
        '<option>Unit&Sub</option>'+
        '</select>'+
        '</td>'+
        '<td><input type="text" name="qty" id="qty" class="form-control"></td>'+
        '<td><input type="text" name="total_price" id="total_price" class="form-control"></td>'+
        '<td><input type="button" name="" class="btn btn-danger remove_fields" value="X" ></td>'+
        '</tr>');
            } 
 }); });