JQuery按Tr标签的属性填充下拉列表

Question

我无法根据我的需要填充dropdownbox（AJAX正在运行）。也就是说它会从数字＆＃39;中获取价值。来自tag的属性并将其传递给函数。

我想采用属性＆＃39;数字＆＃39;来自标签，因为稍后我将使用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

问题是，当我点击下拉菜单时，下拉菜单会重置，如何解决此问题？

您必须使用click阻止tr事件在event.stopPropagation();冒泡，因为当您在任何下拉列表中应用change事件时，它会传播点击事件< strong> 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);
        });

    });