Javascript 如何区分和合并多个选择下拉列表？

我有一个包含多行和4列的表。每列包含一个选择下拉列表，第二列中的选项取决于第一列的选择，第三列取决于第二列的选择，依此类推。我尝试给selects提供id并实现onclick侦听器。但它只适用于第一排。请帮我解决这个问题

以下是HTML代码：`

<table>
{% for int i in (0,x) %}
<tr>
<td>
<select id='Product'>
<option>Car</option>
<option>Bike</option>
<option>Bus</option>
</td>
<td>
<select id='Model'>
</td>
<td>
<select id='Make'>
</td>
<td>
<select id='Color'>
</td>
</tr>
{% endfor%}

{（0，x）%}
汽车
自行车
公共汽车
{%endfor%}

以下是Jquery：

$("#product").change(function (event) {
                event.preventDefault();
                var val = $(this).val();
                if( val == "none"){
                        $('#Model').empty().append($("<option></option>")
                                        .attr("value","none")
                                        .text("Select"));
                        $('#Make').empty().append($("<option></option>")
                                        .attr("value","none")
                                        .text("Select"));
                        $('#Color').val("Red");
                }else{
                        var url_select = "/XYZ/product/?selected_product=" + val;
                        $(".innerload").css("visibility", "visible");
                        $.get(url_select, function(data){                      
                              $('#Model').empty().append($("<option></option>")
                                                .attr("value","none")
                                                .text("Select"));
                              $('#Make').empty().append($("<option></option>")
                                                .attr("value","none")
                                                .text("Select"));
                                $.each(data, function (i, item) {
                                        $('#Model')
                                                .append($("<option></option>")
                                                .attr("value",item.model)
                                                .text(item.model));
                                });
                        });
                }
 });

$（“#产品”）。更改（功能（事件）{
event.preventDefault（）；
var val=$（this.val（）；
如果（val==“无”）{
$（'#Model'）.empty（）.append（$（“”）
.attr（“值”、“无”）
.文本（“选择”）；
$（'#Make'）.empty（）.append（$（“”）
.attr（“值”、“无”）
.文本（“选择”）；
$（'#Color'）.val（“红色”）；
}否则{
var url_select=“/XYZ/product/？selected_product=“+val；
$（“.innerload”）.css（“可见性”、“可见”）；
$.get（url\u选择，函数（数据）{
$（'#Model'）.empty（）.append（$（“”）
.attr（“值”、“无”）
.文本（“选择”）；
$（'#Make'）.empty（）.append（$（“”）
.attr（“值”、“无”）
.文本（“选择”）；
$。每个（数据、功能（i、项）{
$（“#模型”）
.append（$（“”）
.attr（“值”，item.model）
.文本（项目.模型））；
});
});
}
});

---

类似的jquerys用于Model和Make onChange。

请不要在多个time-in-loop中使用相同的id，id始终相同，这样就不起作用了

用js scriptI使用的类来轰炸我们，但它会更改所有行中的所有列选择选项。您可以使用id为的循环变量，因此所有选择都会有所不同。如果使用不同的id，我将如何处理单击？