javascript - JQuery 按 tr 标签的属性填充下拉列表

Question

我未能根据我的需要填充下拉框(AJAX 正在工作)。也就是说，它将从标签的“number”属性中获取值并将其传递给函数。

我想从标签中获取属性“number”，因为稍后我将使用 JQuery 动态添加和删除此标签(针对多辆车)。

问题是当我点击下拉菜单时，下拉菜单不断重置，如何解决这个问题？

这是我的 JQuery 代码:

var counterVehicle = 0;  
$(document).ready(function(){

    $( "tr.vehicle" ).click(function(e) {
        counterVehicle = $(this).attr('number');
        VehicleCategory();
    }); 

    //Start Vehicle
    $("#category" + counterVehicle).change(function(){
        var category=$("#category" + counterVehicle).val();
        VehicleBrand(category);
    });

    $("#brand"  + counterVehicle).change(function(){
        var category=$("#category" + counterVehicle).val();
        var brand=$("#brand"  + counterVehicle).val();
        VehicleModel(category,brand);
    });

    $("#model" + counterVehicle).change(function(){
        var category=$(".category").val();
        var brand=$("#brand"  + counterVehicle).val();
        var model=$("#model" + counterVehicle).val();
        VehicleYear(category,brand,model);
    });

    $("#year" + counterVehicle).change(function(){
        var category=$(".category").val();
        var brand=$("#brand"  + counterVehicle).val();
        var model=$("#model" + counterVehicle).val();
        var year=$("#year" + counterVehicle).val();
        VehicleMileage(category,brand,model,year);
    });

    $("#mileage" + counterVehicle).change(function(){
        var category=$(".category").val();
        var brand=$("#brand"  + counterVehicle).val();
        var model=$("#model" + counterVehicle).val();
        var year=$("#year" + counterVehicle).val();
        var mileage=$("#mileage" + counterVehicle).val();
        VehiclePrice(category,brand,model,year,mileage);
    });

});

这是我的下拉列表的 HTML 代码:

<tr class="vehicle" number="1">
    <td align="center">1</td>
    <td><select id="category1" class="form-control category"></select></td>
    <td><select id="brand1" class="form-control brand"></select></td>
    <td><select id="model1" class="form-control model"></select></td>
    <td><select id="year1" class="form-control year"></select></td>
    <td><select id="mileage1" class="form-control mileage"></td>
    <td><input type="text" id="price1" class="form-control price" disabled></td>
</tr> 

<tr class="vehicle" number="2">
    <td align="center">2</td>
    <td><select id="category2" class="form-control category"></select></td>
    <td><select id="brand2" class="form-control brand"></select></td>
    <td><select id="model2" class="form-control model"></select></td>
    <td><select id="year2" class="form-control year"></select></td>
    <td><select id="mileage2" class="form-control mileage"></td>
    <td><input type="text" id="price2" class="form-control price" disabled></td>
</tr>

这是 HTML 的图片:

Answer 1

问题是当我点击下拉菜单时，下拉菜单不断重置，如何解决这个问题？

您必须使用 event.stopPropagation(); 来停止 click 事件在 tr 处冒泡，因为当您应用 任何下拉菜单上的 >change 事件都会将点击事件 first 传播到最接近的 tr，从而执行并重置 VehicleCategory() .:

var counterVehicle = 0;  
$(document).ready(function(){

        $( "tr.vehicle" ).click(function(e) {
            counterVehicle = $(this).attr('number');
            VehicleCategory(); // <----this gets executed when you try to apply change
        });                    // event on any dropdown because you click before change.


        //Start Vehicle
        $("#category" + counterVehicle).change(function(e){
            e.stopPropagation();
            var category=$("#category" + counterVehicle).val();
            VehicleBrand(category);
        });

        $("#brand"  + counterVehicle).change(function(e){
            e.stopPropagation();
            var category=$("#category" + counterVehicle).val();
            var brand=$("#brand"  + counterVehicle).val();
            VehicleModel(category,brand);
        });

        $("#model" + counterVehicle).change(function(e){
            e.stopPropagation();
            var category=$("#category" + counterVehicle).val();
            var brand=$("#brand"  + counterVehicle).val();
            var model=$("#model" + counterVehicle).val();
            VehicleYear(category,brand,model);
        });

        $("#year" + counterVehicle).change(function(e){
            e.stopPropagation();
            var category=$("#category" + counterVehicle).val();
            var brand=$("#brand"  + counterVehicle).val();
            var model=$("#model" + counterVehicle).val();
            var year=$("#year" + counterVehicle).val();
            VehicleMileage(category,brand,model,year);
        });

        $("#mileage" + counterVehicle).change(function(e){
            e.stopPropagation();
            var category=$("#category" + counterVehicle).val();
            var brand=$("#brand"  + counterVehicle).val();
            var model=$("#model" + counterVehicle).val();
            var year=$("#year" + counterVehicle).val();
            var mileage=$("#mileage" + counterVehicle).val();
            VehiclePrice(category,brand,model,year,mileage);
        });

    });