仅在当前行中填充列表

Question

我有动态添加行。每行包含2个下拉列表（select）。它们用于类型和类别选择。类别取决于类型。

问题是当我更改select选项时，它也会影响其他行，这不是我的意图。

例如，当有3行时。如何改进此功能，以便它只影响特定的select选项？

这是我的HTML代码

<table id="dynamic_field">  
    <tr>        
        <td>
            <label>Vehicle Type:</label>
            <select name="vehicle_type[]" class="" id="" onchange="get_category(this.value)">
                <option value="">Type</option>
                <option value="Car">Car</option>
                <option value="Bus">Bus</option>                  
            </select>
        </td>   
        <td>
            <label>Vehicle Category</label>
            <select name="vehicle_category[]" class="category" id="category" onchange="get_sub_category(this.value)" >
                <option value="">Category</option>
            </select>
        </td> 
        <td>
            <label>Vehicle Sub Category</label>
            <select name="vehicle_sub_category" class="form-control subcategory">
                <option value="">Sub Category</option>
            </select>
        </td> 
    </tr>  
    <tr>
        <!--- etc. --->
    </tr>
</table>

这是我的jquery代码

function get_category(key){
    $.ajax({
        url: 'getCat',
        type: "get",
        data: {type:key},
        success: function(data){ // What to do if we succeed
            $('.category').empty();
            $('.subcategory').empty();
            $.each(data, function (i, d) {
                $('.category').append($('<option>', {
                    value: d.id,
                    text : d.V_Category
                }));
            });
        }
    });         
}

Answer 1

删除onchange HTML属性：

onchange="get_category(this.value)"

而是通过代码绑定事件处理，并找到相应的类别/子类别。由于您的相关select元素位于相邻的td元素中，您需要先获取当前select所在的行，然后找到另一个类别元素：

$("[name*=vehicle_type]").change(function () {
    var $type = $(this); // get the current select element
    var $row = $type.closest("tr"); // find the row that has the related select elements
    var $cat = $("[name*=vehicle_category]", $row); // .. the category-select
    var $subcat = $("[name*=vehicle_sub_category]", $row); // .. the subcategory-select
    $.ajax({
        url: 'getCat',
        type: "get",
        data: { type: $type.val() },
        success: function(data) {
            $cat.empty();
            $subcat.empty();
            $.each(data, function (i, d) {
                $cat.append($('<option>', {
                    value: d.id,
                    text : d.V_Category
                }));
            });
        }
    });    
});

Answer 2

我认为你必须在DOM中使用下一个元素，否则它将使用类category更改所有DOM元素。所以你可以使用next jQuery方法。

描述：获取匹配元素集中每个元素的紧随其后的兄弟。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个兄弟。

尝试更改您的代码：

function get_category(key){

      $.ajax({
         url: 'getCat',
         type: "get",
         data: {type:key},
          success: function(data){ // What to do if we succeed
          $(this).next('.category').empty();
          $(this).next('.subcategory').empty();

          $.each(data, function (i, d) {
          $(this).next('.category').append($('<option>', {
            value: d.id,
            text : d.V_Category
             }));
         });

      }
    });

 }