jsTransform - Select Box Repopulation

When doing a select box using jqTransform, some people might want to receive the option items from a Ajax request and use the result as the new option items.

However, since the update in select's options will be automatically reflected to the jqTransform to respond, the updated option list seems not be able to be updated. In face, the updated is made, only to be hidden select box, but not to the jqTransform wrapper for select box.

Therefore, we need to revalidate the jqTransfromation on the dynamically updated select box.

I will modify the jquery.jqtransform.js, on the Select section:

original code is:

/***************************
Select 
***************************/ 
$.fn.jqTransSelect = function(){
 return this.each(function(index){
  var $select = $(this);

  if($select.hasClass('jqTransformHidden')) {return;}
  if($select.attr('multiple')) {return;}

  var oLabel  =  jqTransformGetLabel($select);
  /* First thing we do is Wrap it */
  var $wrapper = $select
   .addClass('jqTransformHidden')
   .wrap('<div class="jqTransformSelectWrapper"></div>')
   .parent()
   .css({zIndex: 10-index})
  ;
  ...
  ...

Modify code is:

/***************************
Select 
***************************/ 
$.fn.jqTransSelect = function(isRefreshOptionList){
 return this.each(function(index){
  var $select = $(this);

  if($select.hasClass('jqTransformHidden') && isRefreshOptionList !== true) {return;}
  if($select.attr('multiple')) {return;}

  var oLabel  =  jqTransformGetLabel($select);
  
  if (typeof isRefreshOptionList != 'undefined' && isRefreshOptionList === true){
   $parent = $select.parent();
   if ($parent.hasClass('jqTransformSelectWrapper')){
    $select.parent().children().not($select).each(function (){
     $(this).remove();
    });
    $select.removeClass('jqTransformHidden').unwrap($select.parent());
   }
  }
  
  /* First thing we do is Wrap it */
  var $wrapper = $select
   .addClass('jqTransformHidden')
   .wrap('<div class="jqTransformSelectWrapper"></div>')
   .parent()
   .css({zIndex: 10-index})
  ;
  ...
  ...

isRefreshOptionList parameter becomes a optional variable that controlling a select box to be revalidated.
After your Ajax request and put the new option list into the select box. You can call:

$('#select-box-id').jqTransSelect(true);

to repopulate the option list.