JQuery Populate Dropdown por atributo de la etiqueta tr

Fallé al llenar el dropdownbox de acuerdo con mi necesidad (el AJAX está funcionando). Es decir, tomará valor del atributo ‘número’ de la etiqueta y lo pasará a una función.

Quiero tomar el atributo ‘número’ de la etiqueta porque más adelante agregaré y borraré esta etiqueta dinámicamente con JQuery (para múltiples vehículos).

El problema es que el menú desplegable se reinicia mientras hago clic en el menú desplegable, ¿cómo superar este problema?

Este es mi código 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); }); }); 

Este es mi código HTML para este menú desplegable:

  1         2        

Esta es la imagen del HTML:

enter image description here

El problema es que el menú desplegable se reinicia mientras hago clic en el menú desplegable, ¿cómo superar este problema?

event.stopPropagation(); detener el evento click para aparecer en tr con event.stopPropagation(); porque cuando aplica un evento de change en cualquier menú desplegable, propagará el evento click primero al tr más cercano y así VehicleCategory() ejecutará y reiniciará:

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