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

辅助1234

我有多个下拉列表动态添加，并且它们有自己的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>

维沙尔莫迪

您可以使用class处理它，而不是使用id处理下拉更改事件。因此它将对所有下拉菜单执行。但是正如您所说的那样，下拉列表是动态添加的，您需要全局创建click事件。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。