如何在多个下拉列表中使用相同的 JavaScript function

Question

我有多个动态添加的下拉列表，它们有自己的 ID，我有一个 function，我在其中调用 OnChange 事件以根据下拉列表中的选择传递一些值，但目前我只是用第一个 select 执行此操作。

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”是第一个下拉列表的 id，“id_detallepedido_set-0-precio”是我根据所选值传递值的字段的 id，无论如何都可以在添加的每个下拉列表中使用这个 function动态的？

我在这里添加了带有 Django 表格的下拉列表：

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

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

假设您有 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/

Answer 2

如果元素是动态添加的，您可以像这样将事件附加到document 。

$(document).on('change', '[write common selector here]', function callback() {})

Answer 3

制作一个 static class 对于每个元素都是相同的，并以这种方式进行

$(".commonClass").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);
    } 

    });        
});