jqTransform Update Select Options

Question

I'm dynamically altering a select list's options. I am using the jqTransform plugin. It won't update itself automatically, which I didn't expect it would, but I can find a method for updating the display. I can't even find a method for removing it completely.

What I'd like is to find a method such as formelement.jqTransformUpdate() that will fix this. Any ideas?

Answer 1

I know it's an old question, but maybe it helps someone. I couldn't find the answer, so I looked into jqtransform.js code.

Just comment this line:

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

And then, after "onchange" event run:

$('#container select').jqTransSelect();

Answer 2

function selectRating(rating) {
   $("#ratingModal .jqTransformSelectWrapper ul li a").each(function() {
     if (parseInt($(this).attr("index")) == rating - 1) {
         $(this).click();
     }
   });      
}

A JS function I used in my own application to select specific option with the given rating. I think you can modify it to meet your needs.

The idea is to use a.click event handler to select specific option in the transformed select list.

Answer 3

regarding this:

That adds another drop-down to the page every time I call it now

When you comment this line:

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

add this just below:

if($select.hasClass('jqTransformHidden')) $select.parent().removeClass();

it's not a very elegant solution, but it worked in my case, the new select is still nested inside child and so on but it's working fine.

Answer 4

It could be better, try to add new method in jqtransform.js:

$.fn.jqTransSelectRefresh = function(){
    return this.each(function(index){
        var $select = $(this);

        var i=$select.parent().find('div,ul').remove().css('zIndex');
        $select.unwrap().removeClass('jqTransformHidden').jqTransSelect();
        $select.parent().css('zIndex', i);

    });
}

after that, just call it each time you need to refresh the dropdown:

$('#my_select').jqTransSelectRefresh();

Answer 5

hi please try the following to selectively reapply styling to newly created or select box returned from the ajax request

$('#container select').jqTransSelect();