0

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?

KooiInc
  • 119,216
  • 31
  • 141
  • 177
Bruno
  • 801
  • 5
  • 11
  • 1
    your second select does not contain any options to select. first append options to your second select. – Pavan Kumar T S Sep 23 '21 at 10:31
  • Pavan is correct. You need to append your options before the line `selector.closest(".teste").find(".slart1").val(artigo1)`. It will not be able to assign a value if there is not an `option` with that exact value. – George Sun Sep 23 '21 at 10:34
  • @George Sun And how can I add my options before this line? Can you help? – Bruno Sep 23 '21 at 10:44

0 Answers0