Olá! Estou fazendo um programa simples para o gerenciamento de minhas cervejas e vendas.
Na view de pedidos, eu consegui fazer a adição de uma nova linha para a inclusão de um novo item para o pedido.
Campos: id_item(select) | id_lote_item(select) | quantidade (text) | valor unitario(text) | subtotal(text)
Código jquery que faz a adição dos campos:
var campos_max = 10; //max de 10 campos
var x = 1; // campos iniciais
$('#add_field').click(function (Event) {
Event.preventDefault(); //prevenir novos clicks
if (x < campos_max) {
$('#listas').append('\
<div id="linha">\n\
<div class="col-sm-3">\n\
<div class="form-group">\n\
<label for="exampleInputEmail1">Cerveja</label>\n\
<select name="id_item_estoque_pedido[]" id="id_item" class="select2 form-control">\n\
<option>Selecione</option>\n\
</select>\n\
</div>\n\
</div>\n\
<div class="col-sm-3">\n\
<div class="form-group">\n\
<label for="exampleInputEmail1">Lote</label>\n\
<select name="id_lote_pedido[]" id="id_lote_item" class="select2 form-control">\n\
<option>Selecione o lote</option>\n\
</select>\n\
</div>\n\
</div>\n\
<div class="col-sm-2">\n\
<div class="form-group">\n\
<label for="exampleInputEmail1">Qtd. Pedido</label>\n\
<input type="text" name="quantidade_item_pedido[]" id="quantidade_item_pedido" class="form-control">\n\
</div>\n\
</div>\n\
<div class="col-sm-2">\n\
<div class="form-group">\n\
<label for="exampleInputEmail1">valor Unitario</label>\n\
<input type="text" name="valor_unitatio_item_pedido[]" id="valor_unitatio_item_pedido" class="form-control">\n\
</div>\n\
</div>\n\
<div class="col-sm-2"><div class="form-group">\n\
<label for="exampleInputEmail1">Subtotal</label>\n\
<input type="text" id="subtotal_item_pedido" class="form-control" readonly="true">\n\
</div>\n\
</div>'
);
x++;
}
});
Até ai tudo bem... a minha duvida vem agora... O campo id_lote_item é alterado para exibir os lotes do item selecionado.
Codigo jquery:
$('#id_item').change(function (e) {
var item = $('#id_item').val();
var base_url = '<?php echo base_url(); ?>';
$.getJSON(base_url + 'pedido/GetLoteByIdItem/' + item, function (dados) {
if (dados.length > 0) {
var option = '<option>Selecione o lote</option>';
$.each(dados, function (i, obj) {
option += '<option value="' + obj.id_lote + '">' + obj.nome_lote + ' - ' + 'Qtd: (' + obj.quantidade_garrafas_lote + ')</option>';
})
} else {
option = '<option>Selecione o lote</option>';
}
$('#id_lote_item').html(option).show();
});
});
Eu consegui fazer para somente uma linha. Agora com esse esquema de linhas dinamicas eu não consegui nem a pau.
Obrigado pela ajuda!
#id_item
? Ou seja, estás a adicionar várias vezes o HTML que tens na pergunta é isso? e funciona só para o primeiro certo?$('#id_item').change(function (e) {
funciona para 1 campo, mas não para os proximos certo?