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

我没能根据我的需要填充dropdownbox（AJAX正在运行）。 也就是说它将从tag中的’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代码：

  1         2        

这是HTML的图片：

Answer 1

问题是当我点击下拉列表时，下拉保持重置，如何克服这个问题？

你必须使用event.stopPropagation();阻止click事件在tr处冒泡event.stopPropagation(); 因为当你在任何下拉列表中应用change事件时，它会首先将click事件传播到最近的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); }); });