值正在被相同的值更改 - jquery

Question

我需要顯示最接近下拉的行與該下拉值。但是，這裏發生的事情是，如果我添加一行，在下拉的變化上，值被替換爲該值。

$(document).on('change', '.BundleAssetType', function() { 
 

 
    var class1 = class2 = class3 = class4 = ''; 
 
    var id = $(this).val(); 
 

 

 
    class1 = $(this).closest('tr').find("td:eq(1) input[type='text']").attr('class').split(' ')[1]; 
 
    class2 = $(this).closest('tr').find("td:eq(2) input[type='text']").attr('class').split(' ')[1]; 
 
    class3 = $(this).closest('tr').find("td:eq(3) input[type='text']").attr('class').split(' ')[1]; 
 
    class4 = $(this).closest('tr').find("td:eq(4) input[type='text']").attr('class').split(' ')[1]; 
 

 

 
    $('.' + class1).val(id); 
 
    $('.' + class2).val(id); 
 
    $('.' + class3).val(id); 
 
    $('.' + class4).val(id); 
 

 
}); 
 

 
$(document).on('click', '.add', function() { 
 
    var $tr = $(this).closest('tr'); 
 
    var $lastTr = $tr.closest('table').find('tr:last'); 
 
    var $clone = $lastTr.clone(); 
 

 
    $clone.find('td').each(function() { 
 
    var el = $(this).find(':first-child'); 
 
    var id = el.attr('id') || null; 
 
    if (id) { 
 
     var i = id.substr(id.length - 1); 
 
     var prefix = id.substr(0, (id.length - 1)); 
 
     el.attr('id', prefix + (+i + 1)); 
 
    } 
 
    }); 
 

 
    $clone.find('input:text').val(''); 
 
    $tr.closest('tbody').append($clone); 
 

 

 
}); 
 

 
$(document).on('click', '.deleteB', function() { 
 
    //dont delete the last data row 
 
    var parentId = $(this).closest('table').attr('id'); 
 

 
    if ($('#' + parentId + ' tr').length > 3) { 
 
    var $tr = $(this).closest('tr'); 
 
    $tr.remove(); 
 

 
    } 
 

 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-stripped" id="TableOne" style="width: 100%"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th colspan="2" style="text-align: center">AM</th> 
 
     <th colspan="2" style="text-align: center">PM</th> 
 
     <th></th> 
 
    </tr> 
 
    <tr> 
 
     <th width="30%">Category</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="10%"></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <select class="form-control BundleAssetType" autocomplete="off" name="asset_category_id[]"> 
 
      <option value="">--Select Category --</option> 
 
      <option value="4">Medium Roller</option> 
 
      <option value="2">Paver</option> 
 
      <option value="1">Small Roller</option> 
 
      <option value="3">Sweet Paver</option> 
 
     </select> 
 

 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_am[]" class="form-control WeekdayAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_am[]" class="form-control WeekendAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_pm[]" class="form-control WeekdayAssetPm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_pm[]" class="form-control WeekendAssetPm"> 
 
     </td> 
 
     <td> 
 
     <div class="btn-group btn-group-sm" role="group" aria-label=""> 
 
      <button type="button" class="add btn btn-sm btn-primary">+</button> 
 
      <button type="button" class="deleteB btn btn-sm btn-danger">-</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

任何建議，請。

Answer 1

這是因爲在這裏

$('.' + class1).val(id); 
    $('.' + class2).val(id); 
    $('.' + class3).val(id); 
    $('.' + class4).val(id); 

您選擇有這些類在整個文檔中的所有元素。

你可以通過在最接近的TR解決這個問題（我們存儲在性能方面的原因的變量，因爲你使用多次）選擇由類的元素時，按照上下文：

$(document).on('change', '.BundleAssetType', function() { 
 

 
    var class1 = class2 = class3 = class4 = ''; 
 
    var id = $(this).val(); 
 
    var closest_tr = $(this).closest('tr'); 
 

 
    class1 = closest_tr.find("td:eq(1) input[type='text']").attr('class').split(' ')[1]; 
 
    class2 = closest_tr.find("td:eq(2) input[type='text']").attr('class').split(' ')[1]; 
 
    class3 = closest_tr.find("td:eq(3) input[type='text']").attr('class').split(' ')[1]; 
 
    class4 = closest_tr.find("td:eq(4) input[type='text']").attr('class').split(' ')[1]; 
 

 
    $('.' + class1, closest_tr).val(id); // passing closest_tr as context 
 
    $('.' + class2, closest_tr).val(id); // makes it search for elements 
 
    $('.' + class3, closest_tr).val(id); // only that are inside of that TR 
 
    $('.' + class4, closest_tr).val(id); 
 

 
}); 
 

 
$(document).on('click', '.add', function() { 
 
    var $tr = $(this).closest('tr'); 
 
    var $lastTr = $tr.closest('table').find('tr:last'); 
 
    var $clone = $lastTr.clone(); 
 

 
    $clone.find('td').each(function() { 
 
    var el = $(this).find(':first-child'); 
 
    var id = el.attr('id') || null; 
 
    if (id) { 
 
     var i = id.substr(id.length - 1); 
 
     var prefix = id.substr(0, (id.length - 1)); 
 
     el.attr('id', prefix + (+i + 1)); 
 
    } 
 
    }); 
 

 
    $clone.find('input:text').val(''); 
 
    $tr.closest('tbody').append($clone); 
 

 

 
}); 
 

 
$(document).on('click', '.deleteB', function() { 
 
    //dont delete the last data row 
 
    var parentId = $(this).closest('table').attr('id'); 
 

 
    if ($('#' + parentId + ' tr').length > 3) { 
 
    var $tr = $(this).closest('tr'); 
 
    $tr.remove(); 
 

 
    } 
 

 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-stripped" id="TableOne" style="width: 100%"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th colspan="2" style="text-align: center">AM</th> 
 
     <th colspan="2" style="text-align: center">PM</th> 
 
     <th></th> 
 
    </tr> 
 
    <tr> 
 
     <th width="30%">Category</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="10%"></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <select class="form-control BundleAssetType" autocomplete="off" name="asset_category_id[]"> 
 
      <option value="">--Select Category --</option> 
 
      <option value="4">Medium Roller</option> 
 
      <option value="2">Paver</option> 
 
      <option value="1">Small Roller</option> 
 
      <option value="3">Sweet Paver</option> 
 
     </select> 
 

 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_am[]" class="form-control WeekdayAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_am[]" class="form-control WeekendAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_pm[]" class="form-control WeekdayAssetPm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_pm[]" class="form-control WeekendAssetPm"> 
 
     </td> 
 
     <td> 
 
     <div class="btn-group btn-group-sm" role="group" aria-label=""> 
 
      <button type="button" class="add btn btn-sm btn-primary">+</button> 
 
      <button type="button" class="deleteB btn btn-sm btn-danger">-</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

這裏是一個工作撥弄該行中應用所選擇的值，以僅輸入：

$(document).on('change', '.BundleAssetType', function() { 
 

 
    var class1; 
 
    var id = $(this).val(); 
 
    
 
    class1 = $(this).parents('tr').find("input[type='text']").val(id); 
 

 
}); 
 

 
$(document).on('click', '.add', function() { 
 
    var $tr = $(this).closest('tr'); 
 
    var $lastTr = $tr.closest('table').find('tr:last'); 
 
    var $clone = $lastTr.clone(); 
 

 
    $clone.find('td').each(function() { 
 
    var el = $(this).find(':first-child'); 
 
    var id = el.attr('id') || null; 
 
    if (id) { 
 
     var i = id.substr(id.length - 1); 
 
     var prefix = id.substr(0, (id.length - 1)); 
 
     el.attr('id', prefix + (+i + 1)); 
 
    } 
 
    }); 
 

 
    $clone.find('input:text').val(''); 
 
    $tr.closest('tbody').append($clone); 
 

 

 
}); 
 

 
$(document).on('click', '.deleteB', function() { 
 
    //dont delete the last data row 
 
    var parentId = $(this).closest('table').attr('id'); 
 

 
    if ($('#' + parentId + ' tr').length > 3) { 
 
    var $tr = $(this).closest('tr'); 
 
    $tr.remove(); 
 

 
    } 
 

 
});

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table class="table table-bordered table-stripped" id="TableOne" style="width: 100%"> 
 
    <thead> 
 
    <tr> 
 
     <th></th> 
 
     <th colspan="2" style="text-align: center">AM</th> 
 
     <th colspan="2" style="text-align: center">PM</th> 
 
     <th></th> 
 
    </tr> 
 
    <tr> 
 
     <th width="30%">Category</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="15%">Weekday</th> 
 
     <th width="15%">Weekend</th> 
 
     <th width="10%"></th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     <select class="form-control BundleAssetType" autocomplete="off" name="asset_category_id[]"> 
 
      <option value="">--Select Category --</option> 
 
      <option value="4">Medium Roller</option> 
 
      <option value="2">Paver</option> 
 
      <option value="1">Small Roller</option> 
 
      <option value="3">Sweet Paver</option> 
 
     </select> 
 

 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_am[]" class="form-control WeekdayAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_am[]" class="form-control WeekendAssetAm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekday_pm[]" class="form-control WeekdayAssetPm"> 
 
     </td> 
 
     <td> 
 
     <input type="text" autocomplete="off" name="weekend_pm[]" class="form-control WeekendAssetPm"> 
 
     </td> 
 
     <td> 
 
     <div class="btn-group btn-group-sm" role="group" aria-label=""> 
 
      <button type="button" class="add btn btn-sm btn-primary">+</button> 
 
      <button type="button" class="deleteB btn btn-sm btn-danger">-</button> 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>