javascript - 如何在多个下拉列表中使用相同的 JavaScript 函数

Question

我有多个动态添加的下拉列表，它们有自己的 ID，我有一个函数，我调用 OnChange 事件来传递一些基于在下拉列表中选择的值，但目前我只是用第一个选择。

JS:

$("#id_detallepedido_set-0-producto").change(function () {
    producto_id = $(this).val();
    var url = '/control/price/'+producto_id;

    $.ajax({              
    type: "GET",    
    url: url,                   
    data: {
        'producto': producto_id 
    },
    success: function (data) {   
        console.log('Funciono!');
        console.log(data);
        $("#id_detallepedido_set-0-precio").val(data);       
    },
    error: function(data) {
        alert('error' + data);
        //console.log(data);
    } 

    });        
});

“id_detallepedido_set-0-producto”是第一个 Dropdownlist 的 id，“id_detallepedido_set-0-precio”是字段的 id 我根据选择的值传递值，无论如何都可以使用这个函数动态添加下拉列表？

我在这里用 Django Form 添加那些下拉列表:

HTML:

<table class="table" id="tPedidos">
  {{ detalle.management_form }}
  {% for form in detalle.forms %}
    {% if forloop.first %}
      <thead>
        <tr>
            {% for field in form.visible_fields %}
                <th>{{ field.label|capfirst }}</th>
            {% endfor %}
        </tr>
        </thead>
    {% endif %}
      <tr class="formset_row-{{ formset.prefix }}">
        {% for field in form.visible_fields %}
          <td>
            {# Include the hidden fields in the form #}
            {% if forloop.first %}
                {% for hidden in form.hidden_fields %}
                    {{ hidden }}
                {% endfor %}
            {% endif %}
            {{ field.errors.as_ul }}
            {{ field }}
          </td>
        {% endfor %}
      </tr>
{% endfor %}
</table>

Answer 1

除了使用 id 处理下拉更改事件之外，您还可以使用 class 来处理它。所以它将对所有下拉菜单执行。 但是正如您所说，您的下拉列表是动态添加的，您需要在全局范围内创建点击事件。

假设您有 3 个下拉菜单，然后只需添加 class = "mydropdownclass"。并将 class = "mytextfield"添加到您的文本控件。

<table>
    <tr>
        <td>
            <select id="t1" class="mydropdownclass">
                <option value="1">101</option>
                <option value="2">102</option>
            </select>

        </td>
        <td>
            <input type="text" class="test" />
        </td>

        <td>
            <input type="text" class="mytextfield" />
        </td>
    </tr>

    <tr>
        <td>
            <select id="t2" class="mydropdownclass">
                <option value="1">101</option>
                <option value="2">102</option>
            </select>

        </td>
        <td>
            <input type="text" class="test" />
        </td>

        <td>
            <input type="text" class="mytextfield" />
        </td>
    </tr>
</table>

<script>
$(document).on("change", ".mydropdownclass" , function() {
    producto_id = $(this).val();
    var controlId = $(this).attr('id');

    //Updat textbox value
    $(this).closest("tr").find('.mytextfield').val($(this).val());

    var url = '/control/price/'+producto_id;

    $.ajax({              
    type: "GET",    
    url: url,                   
    data: {
        'producto': producto_id 
    },
    success: function (data) {   
        console.log('Funciono!');
        console.log(data);
        $("#"+controlId).val(data);       
    },
    error: function(data) {
        alert('error' + data);
        //console.log(data);
    } 

    });        

});

</script>

您可以查看更新后的代码[链接]

https://jsfiddle.net/hubs3m0n/