如何区分和联合多个选择下拉菜单?

时间:2016-02-18 05:19:03

标签: javascript jquery html django

我有一个包含多行和4列的表。每列包含一个选择下拉列表,第二列中的选项取决于第一列的选择,第三列取决于第二列,依此类推。我尝试使用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%}

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

Model和Make onChange的类似jqueries。

1 个答案:

答案 0 :(得分:0)

请不要在循环ID中多次使用相同的ID,因为它无法正常工作