jqTransform drop down menu doesn't show once selected

I am using the plugin jqTransform on my site. (This pluging is jquery and makes the form look good)

Can anybody please tell me why the Country Select form is not showing the Country name once the Country is selected?

I have included a link to the page http://www.gamtool.com/affiliates-registration.asp

This is a breakdown of the code:

<div class="rowElem"><select name="select">
    <option value="opt1" selected>Please select a country</option>
    <option value="AF">Afghanistan</option>
    <option value="AL">Albania</option>
    <option value="DZ">Algeria</option>
    <option value="AS">American Samoa</option>
    <option value="AD">Andorra</option>
    <option value="AO">Angola</option>
    <option value="AI">Anguilla</option>
    <option value="AQ">Antarctica</option>
    <option value="AG">Antigua and Barbuda</option></select></div>

This is a breakdown of the Style Function:

/* -------------
 * Selects
 * ------------- */
.jqTransformSelectWrapper {
    width: 300px;
    position:relative;
    height: 31px;
    background: url(/js/img/select_left.gif) no-repeat top left;
    float:left;
}

.jqTransformSelectWrapper div span {

    font-size: 12px;
    float: none;
    position: absolute;
    white-space: nowrap;
    height: 31px;
    line-height: 15px;
    padding: 8px 0 0 7px;
    overflow: hidden;
    cursor:pointer;
    width: 300px;
    /*border: 1px solid #CCCCCC;*/
/*  border-right: none;*/
}

The JS file is located here: http://www.gamtool.com/js/jquery.jqtransform.js

It looks like the country is displaying but there is a l开发者_StackOverflowayer over it?

Thanks

Solution is to hide the form differently. I'm using height:0 instead display:none. Then in my Javascript I would use animate to show the form. This way jqtransform would style all form elements properly.

CSS:

#sfBlock03 {
  height:0;
  overflow:hidden;
}

JS

$(function() {
      $('#showAdvanced').toggle(function() {
        $('#sfBlock03').animate({
          height: 350
        });
      }, function() {
        $('#sfBlock03').animate({
          height: 0
        });
      });
    });

Note: #showAdvaced is the id of the button to show advanced options and #sfBlock03 is the id of the div containing advanced form.

I hope this helps.

I know Why! Cause the JqueryTransform set the value of your select in the select hidden! So in order to solve this puzzle you must to destroy your select with jqTransformSelectWrapper class after that you have to change the value of select hidden and apply the jqTransform again in your select! Is really complicated, but I have the same problem here!