javascript - Getting stuck in a loop on .change - Select2 Drop Down Lists -
i have 2 drop down lists. 1 people , 1 businesses. if select person list automatically query database , select correct corresponding business associated person. if select business, automatically query database people associated company. clears current list of people , appends associated people.
this works great...until wanted use select2 make drop down lists searchable. stuck in infinite loop because select2 uses .val().trigger('change') method select value want. when that's triggered triggers .change function runs queries , populates fields.
what can fix this?
here code:
$('#personnamefield').select2(); $('#businessnamefield').select2(); /* when business selected pulls associated customers , puts them customer name drop down list */ $("#businessnamefield").change(function getassociatedpeople() { var sitepath = sitepath.sitepath; var business_id = $("#businessnamefield").val(); if (business_id == 'choose company') { $('#personnamefield').val('choose person').trigger('change'); } else { /* location of query script pulls info database */ var url = myticketsscript.pluginsurl + '/portal/public/includes/shortcodes/my-tickets/auto-complete/auto-complete.php'; $.get( url, { business_id: business_id, sitepath: sitepath } ) .done(function( data ) { $('#personnamefield').html('<option value="choose person">choose person</option>'); var results = jquery.parsejson(data); console.log(data); $(results).each(function(key, value) { /* add data customer name drop down list */ $('#personnamefield').append('<option id="customer_id" value="'+ value.id +'">' + value.first_name + ' ' + value.last_name + '</option>'); /* logs data in console */ console.log(key); console.log(value); }) }); } }); /* when person selected pulls associated business , puts business name drop down list */ $("#personnamefield").change(function() { var customer_id = $("#personnamefield").val(); var sitepath = sitepath.sitepath; if (customer_id == 'choose person') { var url = myticketsscript.pluginsurl + '/portal/public/includes/shortcodes/my-tickets/auto-complete/auto-complete.php'; $.get( url, { customer_list: customer_id, sitepath: sitepath } ) .done(function( data ) { $('#businessnamefield').val('choose company').trigger('change'); $('#personnamefield').html('<option value="choose person">choose person</option>'); var results = jquery.parsejson(data); console.log(data); $(results).each(function(key, value) { /* add data customer name drop down list */ $('#personnamefield').append('<option id="customer_id" value="'+ value.id +'">' + value.first_name + ' ' + value.last_name + '</option>'); /* logs data in console */ console.log(key); console.log(value); }) }); } else { /* location of query script pulls info database */ var url = myticketsscript.pluginsurl + '/portal/public/includes/shortcodes/my-tickets/auto-complete/auto-complete.php'; $.get( url, { customer_id: customer_id, sitepath: sitepath } ) .done(function( data ) { var results = jquery.parsejson(data); console.log(data); $(results).each(function(key, value) { /* selects correct company customer selected */ $('#businessnamefield').val(value.id).trigger('change'); console.log(key); console.log(value); }) }); } });
not having used select2 before myself, looked docs , found have of own events.
https://select2.github.io/examples.html#programmatic-control
so rather binding selectors change, perhaps want try like:
$("#businessnamefield").on("select2:select", function () {...}); $("#personnamefield").on("select2:select", function () {...}); i tried on little example below. got infinite loop when using change, once used proper events, didn't loop.
note navigated nested object @ value , text of each select option; e.params.data.id , e.params.data.text, e event passed callback.
it's kind of silly little example selecting 1 option arbitrarily select option in other select, idea. hope helps.
<!doctype html> <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var firstselect = $(".js-example-basic-single1") firstselect.select2(); var secondselect = $(".js-example-basic-single2") secondselect.select2(); firstselect.on("select2:select", function (e) { var value = e.params.data.id; var text = e.params.data.text; console.log("firstselect selected value: " + value); if (value === "al") { secondselect.val("ma").trigger("change"); } else if (value === "wy") { secondselect.val("ca").trigger("change"); } }); secondselect.on("select2:select", function (e) { var value = e.params.data.id; var text = e.params.data.text; console.log("secondselect selected value: " + value); if (value === "ma") { secondselect.val("al").trigger("change"); } else if (value === "ca") { secondselect.val("wy").trigger("change"); } }); }); </script> </head> <body> <select class="js-example-basic-single1"> <option value="default">default</option> <option value="al">alabama</option> <option value="wy">wyoming</option> </select> <select class="js-example-basic-single2"> <option value="default">default</option> <option value="ma">massachusetts</option> <option value="ca">california</option> </select> </body> </html> 