創建行與動態下拉和輸入框與jquery

。請參閱附件圖片以供參考。請參閱「Scope Cat」下拉列表。即使使用jquery，我也添加了2行，兩行都包含相同的下拉列表。但是，他們應該從每行的下拉列表中選擇顯示範圍項目和帳單小時數。但我的問題是，第一行工作正常，並顯示正確的數據，而如果我從第二行選擇任何選項，它顯示的第一行相同的數據，而不是第二行選定的選項的數據。我知道的問題有關每個選擇選項的唯一ID，但我無法通過jquery爲每個選擇選項創建唯一的ID。創建行與動態下拉和輸入框與jquery

要求：我想是建立一個行會的Click事件中添加一個下拉中的每一行表（選項將被動態地從數據庫中顯示）和3個輸入文本框。添加行後，我需要在輸入文本框中顯示數據，並根據行中的下拉列表選擇。

到目前爲止取得的成果：我可以通過jquery創建一個基於點擊事件的行，並且能夠在輸入框中顯示相關數據使用.change（function（）{ ...}）在jquery中，但僅限於第一行數據。

問題需要您的支持：我可以根據需要添加任意數量的行，能夠在所有添加的行上動態顯示下拉列表。但問題是，在添加多於一行後，所有輸入字段都顯示與第一行相同的數據。我無法顯示該行的特定行數據下拉選擇。例如，如果我從第一行的下拉列表中選擇Option1，則會按照下拉選擇在第一行的輸入字段中顯示正確的數據。但是，當我在第二行中選擇不同的選項，例如：Option2，即使它然後顯示第一行數據基礎第一行選擇Option1。這看起來與選擇選項類或Id的問題應該是獨特的，我相信我不能這樣做。需要您的專家建議來了解我出錯的位置。下面提供的是我上面提到的代碼。

<div class="item form-group"> 
    <table class="table table-striped jambo_table bulk_action"> 
     <thead> 
     <tr class="headings"> 
      <th class="column-title">Scope Cat </th> 
      <th class="column-title">Scope Item </th> 
      <th class="column-title">Billing Hours</th> 
      <th class="column-title">Costing per Scope</th> 
     </tr> 
     <input class="btn btn-primary" name="addnewscope" type="button" value="add Scope" onClick ="addRow(this)"> 
    </thead> 
    <tbody id="addnewscopesfromid"> 

    </tbody> 
    </table> 
</div> 
    function addRow(btn) { 
     $('.scopecategory23221').html(''); 
     $('#addnewscopesfromid').append('<tr><td class="column-title"><select class="form-control scopecategory23221" name="scopecategory23221"><option value="">Scope Category</option></select></td><td class="column-title"><input name="scopeitem22313324" class="form-control col-md-7 col-xs-12 scopeitem22313324" type="text" value=""></td><td class="column-title"><input name="scopebillinghours22313324" class="form-control col-md-7 col-xs-12 scopebillinghours22313324" type="text" value=""></td> <td class="column-title"><input name="scopebillinghourlyrate11213423" class="form-control col-md-7 col-xs-12 scopebillingcost11213423" type="text" value=""></td></tr>'); 
     var scopelist='Scopelist'; 
     $.ajax({ 
      type: "GET", 
      url: "includes/getcontactnames.php", 
      data: scopelist, 
      dataType: "json", 
      success: function (data) { 
       $.each(data, function (i, field) { 
        var scopeitemId=field.scopeitemId; 
        var scopeitemsname=field.scopeitemName; 
        $('.scopecategory23221').append('<option value="'+scopeitemId+'">'+scopeitemsname+'</option>'); 

       }); 
      } 
     }); 
     $('.scopecategory23221').change(function(){ 
     var scopeCat =document.getElementsByClassName('scopecategory23221'); 
     var scopeCat1 = scopeCat[0].options[scopeCat[0].selectedIndex].value; 
     alert(scopeCat1); 
     var scopedataString= 'scopecategory='+scopeCat1; 
     $.ajax({ 
       type: "GET", 
       url: "includes/getcontactnames.php", 
       data: scopedataString, 
       dataType: "json", 
       success: function (data) { 
        $.each(data, function (i, field) { 
         var scopeitemname=field.scopeitemName; 
         var scopebillinghours=field.billingHours; 
         $('.scopeitem22313324').val(scopeitemname); 
         $('.scopebillinghours22313324').val(scopebillinghours); 
        }); 
       } 
      }); 
    }); 
}

來源

2017-08-30 Krishna

在這裏你可以嘗試這樣的事情。

<div id="box"> 
    <table class="table table-striped jambo_table bulk_action"> 
     <thead> 
      <tr class="headings"> 
       <th class="column-title">Scope Cat </th> 
       <th class="column-title">Scope Item </th> 
       <th class="column-title">Billing Hours</th> 
       <th class="column-title">Costing per Scope</th> 
      </tr> 
      <input class="btn btn-primary" name="addnewscope" type="button" 
       value="add Scope" id ="add"> 
     </thead> 
<tbody id="addnewscopesfromid"> 

</tbody></table></div>

然後在你的腳本文件

<script> 
window.onload = function() { 
    $('#add').on('click', function() { 

     var inp = $('#box'); 
     var i = $('input').length + 1; 
     $('<div id="box' + i + '" class="col-lg-12"><table class="table table-bordered table-responsive table-responsive">\n\ 
       <tbody>\n\ 
         <td>Your Table Values</td>\n\ 
        </tr>\n\ 
       </tbody>\n\ 
      </table></div>').appendTo(inp); 

     i++; 
    }); 
}

<script> 
    $(document).ready(function() { 
     $('#add').click(function() { 

      var dataId = ''; 
      $.ajax({ 
       type: 'GET', 
       url: 'includes/getcontactnames.php', 
       async: true, 
       dataType: 'json', 
       data: scopedataString, 
       success: function (data) { 
        console.log(data); 
        var $select = $('#select-box Id'); 
        $select.find('option').remove(); 
        for (var i in data.data) { 
         $select.append('<option value=' + data.data[i].id + '>' + data.data[i].item_name + '</option>'); 
        } 
       }, 
      }); 
     }); 
    }); 
</script>

希望這有助於你。

來源

2017-08-30 08:21:02 Mohsin

創建行與動態下拉和輸入框與jquery

回答

相關問題