I have the following code that when selecting a value in a select will return another value in another select according to the database query:
const campos_max = 10;
let x = 0;
$('#add_field').click(function(e) {
e.preventDefault();
if (x < campos_max) {
//added outer div here
$('#listas').append(`<div class="teste"><select class="form-control1 Reff${x}" name="Ref[]"><option></option></select><select class="slart1 form-control1 Desigg${x}" name="Reef1"><option ></option></select></div>`)
}
var html = $(`.Reff${x}`);
html.append(`<option value="A">A</option><option value="B">B</option><option value="C">C</option>`);
x++;
});
$(document).on("change", "select[class*=Reff]", function() {
var Refart = $(this).val();
var selector = $(this)
console.log(Refart)
artigo1 = "soemthing..."
selector.closest(".teste").find(".slart1").val(artigo1)
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listas"></div>
<button id="add_field">Add more</button>The problem that is happening is that it doesn't load the second select with the returned value.
Using an input works, but using a select it doesn't. Can you help?