Using onclick event with select

Question

I would like to load with ajax the options of a select after onclick

I tried using onclick and click functions of jquery but doesn't work

 $(".myselect").on("click", function() { let thisv = $(this); $.ajax({ url: "cargar_select_plazas", dataType: "JSON", type: "POST", data: { some: data }, success: function(r) { let html = ""; for (let x in r) { html += `<option value="` + r[x].theid + `">` + r[x].thenameproduct + `</option>`; } $(thisv).html(html); } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="form-control custom-select myselect"> </select> 

Answer 1

• To my knowledge jQuery doesn't support click event on select element
• Putting the select in a div and binding click event on that div would be a
  workaround
• In these approaches, however, the request will take time to complete during which the user won't be able to see updated options.
• Of the top of my head, a better way to do it would be to bind it to focus event, handler for which would first show a loader, then complete and process the request and options and finally remove the loader.