jqTransform下拉菜单不显示一次选中
问题描述:
我在我的网站上使用插件jqTransform。 (此插件是jQuery,并使窗体看起来很好)jqTransform下拉菜单不显示一次选中
任何人都可以告诉我为什么选择国家后国家选择表单不显示国家名称?
我已经包含到页面的链接http://www.gamtool.com/affiliates-registration.asp
这是代码的崩溃:
<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>
这是文体功能的细分:
/* -------------
* 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;*/
}
的JS文件位于:http://www.gamtool.com/js/jquery.jqtransform.js
It loo ks像国家正在显示,但有一层呢?
谢谢
答
我知道为什么! 原因JqueryTransform
设置您选择的值在选择隐藏! 所以为了解决这个难题,你必须在jqTransformSelectWrapper
级别之后摧毁你的选择,之后你必须改变选择隐藏的值并在你的选择中再次应用jqTransform
! 真的很复杂,但我在这里也有同样的问题!
答
解决方法是以不同的方式隐藏窗体。我正在使用height:0
而不是display:none
。然后在我的Javascript中,我会使用animate
来显示表单。这样jqtransform会适当地设置所有表单元素。
CSS:
#sfBlock03 {
height:0;
overflow:hidden;
}
JS
$(function() {
$('#showAdvanced').toggle(function() {
$('#sfBlock03').animate({
height: 350
});
}, function() {
$('#sfBlock03').animate({
height: 0
});
});
});
注:#showAdvaced
是按钮的ID显示高级选项和#sfBlock03
是包含先进的div ID形成。
我希望这会有所帮助。