gpt4 book ai didi

javascript - Ajax Loader 和链式选择框

转载 作者:行者123 更新时间:2023-11-27 22:39:50 25 4
gpt4 key购买 nike

我正在使用动态选择框,我正在使用 JS/Jquery 来更新每个选择框的值。因为我是从 MySQL 表中提取值,所以有时用它的值加载选择框需要更长的时间。我搜索的一种解决方案是使用 ajax 加载程序。

我如何放置一个 ajax 加载器(就在 updateSelectBox.js 中的 jQuery.getJSON 之前),以便在第一个选项卡上加载时无法单击任何内容,并在成功处理后将其删除(在同一文件中)?或任何更好的解决方案?这是一个 EXAMPLE

updateSelectBox.js

var formObject = {
run : function(obj) {

obj.nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
var id = obj.attr('id');
var v = obj.val();
jQuery.getJSON('mod/postfile.php', { id : id, value : v }, function(data) {
$('.update').removeClass('last');
if (!data.error) {
obj.next('.update').html(data.list).removeAttr('disabled hidden');
} else {
obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
}
});
}
};

$(function(){

$('.update').live('change', function() {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("#postSelected").text(str);

formObject.run($(this));
});

});

HTML

<select name="gender" id="gender" class="update" size="7"> 
<option value="">Select one</option>
<?php if (!empty($list)) { ?>
<?php foreach($list as $row) { ?>
<option value="<?php echo $row['id']; ?>">
<?php echo $row['category_name']; ?>
</option>
<?php } ?>
<?php } ?>
</select>

<select name="category" id="category" class="update" disabled="disabled" hidden="hidden" size="7">
<option value="">----</option>
</select>

<select name="colour" id="colour" class="update" disabled="disabled" hidden="hidden" size="7">
<option value="">----</option>
</select>

最佳答案

首先,您应该创建一个 ajax 加载程序图像(例如 here)并将其保存在您的服务器上。就在 getJSON 之前,应该显示 ajaxloader 覆盖(自定义图像源!):

$('#tabs').append('<div class="overlay"><div class="overlay_image"><img src="ajaxloader.gif" alt="ajaxloader"></div></div>');
$('#tabs .overlay').css("line-height", $('#tabs').height()+'px');

并在成功处理程序的末尾将其删除:

$('#tabs .overlay').remove();

您的 formObject 现在应该是:

var formObject = {
run : function(obj) {
obj.nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
var id = obj.attr('id');
var v = obj.val();
$('#tabs').append('<div class="overlay"><div class="overlay_image"><img src="ajaxloader.gif" alt="ajaxloader"></div></div>');
$('#tabs .overlay').css("line-height", $('#tabs').height()+'px');
jQuery.getJSON('mod/postfile.php', { id : id, value : v }, function(data) {
$('.update').removeClass('last');
if (!data.error) {
obj.next('.update').html(data.list).removeAttr('disabled hidden');
} else {
obj.addClass('last').nextAll('.update').attr({'disabled': true, 'hidden':true}).html('<option value="">----</option>');
}
$('#tabs .overlay').remove();
});
}
};

查看叠加层需要以下额外的样式表:

#tabs {
position: relative;
}

.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2000;
background-color: #EEEEEE;
opacity: 0.5;
}

.overlay > div {
position: relative;
text-align: center;
}

.overlay > img {
vertical-align: middle;
}

另见 this example .

关于javascript - Ajax Loader 和链式选择框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11694432/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com