您的位置:首页 > Web前端 > JQuery

JQuery动态创建表单:ie下select无法下拉(firefox正常)

2015-06-02 09:18 267 查看
HTML代码:
<div id="chosefund">
<div class="chosediv">
<div class="fundsdiv">
<select class="seriessel" id="fund_fundPerformance_fundCompany0">
<%= this.GetFundCompanyOptionList("") %>
</select>
<select class="fundslist" id="fund_fundPerformance_fund0">
<option value="">請選擇基金名稱</option>
</select>
</div>
<a class="fund_fundPerformance_addinco" href="http://yuxnet.blog.163.com/blog/#" style="cursor:pointer;background:url(../images/fund/addinco.gif) no-repeat;"></a>
<a class="fund_fundPerformance_delinco" href="http://yuxnet.blog.163.com/blog/#" style="cursor:pointer;background:url(../images/fund/delinco.gif) no-repeat;"></a>
</div>

</div>

JS代码:
$(document).ready(function() {

$("select.seriessel").change(function() {
var sender = $(this);
$.ajax({
type: 'post',
url: '../edm/GetData/GetFundOptionList.aspx',
dataType: "text",
data: { 'selectedValue': '', 'fundCompany': sender.val() },
cache: false,
async: false,
success: function(options) {
sender.next().hide();
sender.next().html(options);
sender.next().show();
},
complete: function(XMLHttpRequest, textStatus) {

}
});
});

// add or delete the fund of select
var $addBtn = $('#chosefund a.fund_fundPerformance_addinco');
var $delBtn = $('#chosefund a.fund_fundPerformance_delinco');
var $cloneDiv = $('#chosefund > div.chosediv');
var total = 4;
var i = 1;
var copyElement = "";

$addBtn.click(function() {
if (i < total) {
copyElement = $(this).parent('div.chosediv').clone(true);
copyElement.find("select.seriessel").attr("id", "fund_fundPerformance_fundCompany" + i);
copyElement.find("select.fundslist").attr("id", "fund_fundPerformance_fund" + i);
copyElement.find("select.fundslist").empty();
copyElement.find("select.fundslist").append("<option value=''>請選擇基金名稱</option>");
$("#chosefund").append(copyElement);
i++;
return false;
}
});

$delBtn.click(function() {
if (i > 1) {
$(this).parent("div.chosediv").remove();
i--;
return false;
}
});

});

解决方案:
在填充选项前先隐藏下拉框,填充后再显示下拉框就可以了,详见上面红色字体的代码。
百度发现类似问题,有网友解决说:
“最终发现应该是ie8把一些可视化的东西缓存了,也就是在外观不变化的情况下,下拉框下拉出来的部分不变。
在清空语句前后增加了.hide() 和.show()就解决了,没发现闪烁的情况,控件多了不知道会不会有闪烁,真是……无语了。”
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: