Question

。请参阅附图供您参考。请参阅“范围猫”下拉列表。我甚至使用jquery通过单击添加了2行，并且两行包含相同的下拉列表。但是，他们应根据每行下拉列表中的选择显示“范围项目”和“开单时间”。但我的问题是，第一行工作正常并显示正确的数据，而如果我从第二行选择任何选项，它显示的是与第一行相同的数据，而不是第二行中所选选项的数据。我知道问题属于每个选择选项的唯一ID，但我无法通过jquery为每个选择选项创建唯一ID。

要求：我正在尝试构建一个表，其中行将在click事件上添加，每行中有一个下拉（选项将从数据库中动态显示）和3个输入文本框。添加行后，我需要在输入文本框的基础上显示行中下拉列表的选择。

到目前为止取得的成就：我能够通过jquery创建基于click事件的行，并且能够在输入框中显示相关数据，使用.change选择下拉列表（ jquery中的function（）{...}），但仅限于第一行数据。

问题需要您的支持：我可以根据需要添加任意数量的行，能够在所有添加的行上动态显示下拉列表。但问题是，在添加超过1行后，所有输入字段都显示与第一行相同的数据。我无法显示该行的行特定数据基础下拉选择。例如，如果我从第一行的下拉列表中选择Option1，它将根据下拉选择在第一行的输入字段中显示正确的数据。但是当我在第二行中选择不同的选项时，例如：Option2，Even然后它显示第一行数据基于第一行选择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);
                    });
                }
            });
    });
 }

Answer 1

在这里你可以尝试这样的事情。

<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>

希望这会对你有所帮助。

使用动态下拉列表创建行，并使用jquery

1 个答案: