javascript - Refreshing the Jquery function upon changing Select item -

 <select class="brandselect selectpicker">       <option>a</option>       <option>b</option>       <option>c</option>  </select>   <select class="modelselect selectpicker">       <option>1</option>       <option>2</option>       <option>3</option>  </select> 

i have 2 dropdown lists using jquery selectric plugin style select items.

the second dropdown dynamically generated upon selection of first dropdown. following functions of plugin works when first dropdown selection made. gets refreshed.

i need function refresh plugin dropdowns again, upon selection of second dropdown items. doesn't refresh , goes default styling of dropdowns.

how suppose keep these functions alive once runs 1 time?

   $('.brandselect').change(function() {            settimeout(function() {         $('selectpicker').selectric('refresh');         }, 500);     });     $('.modelselect').change(function() {            settimeout(function() {         $('.selectpicker').selectric('refresh');         }, 500);     }; 

you can use .on (event delegation)

place event on parent of select boxes:

<div id="parent">  <select class="brandselect selectpicker">   <option>a</option>   <option>b</option>   <option>c</option>  </select>   <select class="modelselect selectpicker">   <option>1</option>   <option>2</option>   <option>3</option>  </select> </div> 

and js:

updated -eduardo quintana

 $('#parent').on('change', '.brandselect', function() {        settimeout(function() {     $('selectpicker').selectric('refresh');     }, 500); });   $('#parent').on('change', '.modelselect', function(){        settimeout(function() {     $('.selectpicker').selectric('refresh');     }, 500); };