仅在当前行中填充列表

问题描述 投票:1回答:2

我有动态添加行。每行包含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
                }));
            });
        }
    });         
}
javascript jquery
2个回答
0
投票

删除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
                }));
            });
        }
    });    
});

0
投票

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

      }
    });

 }
© www.soinside.com 2019 - 2024. All rights reserved.