select a dropdown option loaded via ajax with javascript

Question

I have this dropdown with options that are loaded via AJAX. I am trying to auto select the first option from dropdown wpce-1 . The second dropdown id wpce-1 is still not loaded because need to select option from dropdown id wpce-0 .

The second dropdown option loads only when wpce-0 option is selected

 $('#wpce-1 option:not([disabled]):nth(1)').attr('selected', 'selected').prop('selected', true).trigger('change').get(0).click();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wpce-field"> <label for="wpce-0">Make</label> <select class="wpce-field-term" id="wpce-0" data-level="0" data-required="yes" data-required-message="" data-type="term"> <option value="">Make</option> <option value="9554">ALFA ROMEO</option> <option value="9642">ASTON MARTIN</option> <option value="9663">AUDI</option> <option value="9873">BENTLEY</option> <option value="9916">BMW</option> <option value="10240">CHEVROLET</option> <option value="10282">CHRYSLER</option> </select> </div> <div class="wpce-field"> <label for="wpce-1">Model</label> <select class="wpce-field-term" id="wpce-1" data-level="1" data-required="yes" data-required-message="" data-type="term"> <option value="">Model</option> </select> </div>

Answer 1

I don't know what all you have in mind so let's have a bit of fun here.

Perhaps you wish to go get new models and then append them as options. I leave the way you go get models (ajax?) to you and use a fake array of name value pairs, sort it then append it as new options here by triggering

 let fakemodels = [{ name: "My Name", value: "12" }, { name: "Wonder Wagon", value: "1234" }, { name: "Beatnick Boat", value: "5634" }, { name: "SuperView", value: "9834" }, { name: "Guzzle", value: "1234455" }, { name: "Wacky Wall", value: "8765" } ]; $('#wpce-0').on('change', function(event) { let selectedMake = $(this).val(); console.log(selectedMake); $('#wpce-1').trigger('load-models', [selectedMake, fakemodels]) }); $('#wpce-1').on('load-models', function(event, make, newValues) { console.log("Make:", make); // optional sort newValues.sort(function(a, b) { var nameA = a.name.toUpperCase(); // ignore upper and lowercase var nameB = b.name.toUpperCase(); // ignore upper and lowercase if (nameA < nameB) { return -1; } if (nameA > nameB) { return 1; } // names must be equal return 0; }); console.log("Models:", newValues); //append our new "models" let newOptions = $.map(newValues, (k, v) => $("<option/>").val(k.value).text(k.name)); // console.log("newOptions:",newOptions); $(this).append(newOptions); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wpce-field"> <label for="wpce-0">Make</label> <select class="wpce-field-term" id="wpce-0" data-level="0" data-required="yes" data-required-message="" data-type="term"> <option value="">Make</option> <option value="9554">ALFA ROMEO</option> <option value="9642">ASTON MARTIN</option> <option value="9663">AUDI</option> <option value="9873">BENTLEY</option> <option value="9916">BMW</option> <option value="10240">CHEVROLET</option> <option value="10282">CHRYSLER</option> </select> </div> <div class="wpce-field"> <label for="wpce-1">Model</label> <select class="wpce-field-term" id="wpce-1" data-level="1" data-required="yes" data-required-message="" data-type="term"> <option value="">Model</option> </select> </div>