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

我认为您必须要在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
             }));
         });

      }
    });

 }

Answer 2

删除onchange HTML属性：

onchange="get_category(this.value)"

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

$("[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
                }));
            });
        }
    });    
});

仅在当前行中填充列表

2 个答案: