很不错的资源

最新推荐文章于 2025-08-07 17:00:33 发布

iteye_9746

最新推荐文章于 2025-08-07 17:00:33 发布

阅读量102

点赞数

CC 4.0 BY-SA版权

文章标签： Ajax J# json

本文链接：https://blog.youkuaiyun.com/iteye_9746/article/details/81963598

本文介绍了一种使用JavaScript实现的动态下拉框联动效果的方法。该方法通过监听特定下拉框的选择变化来动态更新后续下拉框的内容，并支持从缓存或通过AJAX请求获取数据填充下拉框。此外，还提供了初始化下拉框状态的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
* 此函数接受一个对象列表，数目不定,opration:表是触发的事件
* eg：change；fnClear:表示初始化下拉框。var_args表示多个下拉框...
*/
function bindSelects(operation, initSelectObj, loadShow, var_args){
//每个argument对象都有一个 change事件
//change事件会触发：此argument之后的对象清空，紧跟此对象的后一对象发送ajax请求
var elementList = [];
for (var i = 3; arguments[i]; i++)
{
elementList[i-3] = arguments[i];
}
for (var i = 0; elementList[i]; i++)
{
(function(k)
{
elementList[k].bind(operation, function(){
selectType = elementList[k].attr("name");

//其后的对象进行某个操作
for (var j = k+1; elementList[j]; j++)
{
if (initSelectObj && initSelectObj.constructor===Function)
{
if(elementList[k].val() == "")
{
initSelectObj(elementList[j],elementList[j].data(SELECT_KEY));
LOAD_KEYS[j].hide();
}
else{
initSelectObj(elementList[j],elementList[j].data(SELECT_KEY));
}

}
}
//紧跟对象发送ajax
if (elementList[k+1])
{
if(elementList[k].val() != "")
{
//从页面缓存中取出
if(elementList[k+1].data(elementList[k].val()))
{
var data = elementList[k+1].data(elementList[k].val());
var key=LIST_KEYS[k];
var jsonKey = [key];
addContentToSelect(data,jsonKey,elementList[k+1]);
}
else
{
//从缓存中取出数据
if (fnAjax && fnAjax.constructor===Function)
{
loadShow(LOAD_KEYS[k+1]);
fnAjax(elementList[k+1].data(SELECT_KEY),LIST_KEYS[k],LOAD_KEYS[k+1],elementList[k],selectType);
}
}
}
}
});
})(i);
}
}

function fnAjax(selectObj,jsonKey,loadImg,select,selectType){
getParamVal();
var LIST_KEYS=[jsonKey];
$.ajax({
url : "SelectServlet",
type : 'POST',
data : {
"langType":langTypeVal,
"doc_type_Val" : doc_type_Val,
"productLine":productLineVal,
"productFamily":productFamilyVal,
"product":productVal,
"docClass1" :docClass1Val,
"docClass2" :docClass2Val,
"productVersion" :productVersionVal,
"selectType" :selectType
},
dataType : 'json',
success : function(data){
addContentToSelect(data,LIST_KEYS,selectObj);
loadImg.hide();

//加入缓存
$(selectObj).data(select.val(),data);
}
});
}