Jquery - Initialize Select Box after first use

Question

1. Page is loaded with a hidden select box in it.
2. I click on a button
3. I append elements to this select box, I move it and I make it visible
4. I apply plugin Chosen on it

This is done by this function

function moveHiddenSelect(idOffline, type, idMedia, mediaName){
    var $selToReplace  = $("#"+type+"_"+idOffline);
    var $selOriginal   = $("#originalSelect");
    $selToReplace.replaceWith($selOriginal);

    $.getScript('/lib/chosen/chosen.jquery.min.js', function(){
        $selOriginal.chosen(); //load plugin script and apply it on the select box
    });

    $selOriginal.css("width", "220px");
    $selOriginal.css("visibility", "visible");
}

No problem when I click the button one time, but when I click again on the button (step 2) nothing is happend..

Answer 1

The chosen() should be called once, just for creation. After updating the values of each dropdown, you could use: $(DropdoenElement).trigger("liszt:updated");

function moveHiddenSelect(idOffline, type, idMedia, mediaName){
    var $selToReplace  = $("#"+type+"_"+idOffline);
    var $selOriginal   = $("#originalSelect");
    $selToReplace.replaceWith($selOriginal);

    selOriginal.chosen(); // Init the plugin

    $.getScript('/lib/chosen/chosen.jquery.min.js', function(){
       //load plugin script and apply it on the select box
       selOriginal.trigger("liszt:updated")
    });

    $selOriginal.css("width", "220px");
    $selOriginal.css("visibility", "visible");
}

Hope it helps!