简明现代魔法 -> JavaScript -> 下拉选框的联动的自动提交
下拉选框的联动的自动提交
2011-03-11
下拉框的联动应用得很广泛，对于一些有大栏目，小栏目的网站设计来说，可以省更多地方。比如一些信息分类网站，他们的大栏目多，大栏目下的子栏目页多，使用这种联动设计可以方便用户找到自己需要提交信息的栏目。选择第二个子栏目的时候，还可以自动提交。
效果演示
JavaScript Code
<script type="text/javascript">
//分类
var classList = {
"58":["房地产信息",
[["58_59", "房产租售"],
["58_60", "求购住宅"],
["58_78", "写字楼"],
["58_79", "厂房"],
["58_80", "商铺"],
["58_81", "其它"]
]],
"61":["教育培训",
[["61_62", "招生培训"],
["61_63", "外语培训"],
["61_82", "IT培训"],
["61_83", "艺术培训"],
["61_84", "健身培训"],
["61_88", "武术培训"],
["61_89", "早教中心"],
["61_90", "驾驶培训"],
["61_91", "幼稚园"],
["61_92", "家教"],
["61_93", "成人高等教育"],
["61_94", "中小学招生"],
]],
"64":["人才市场",
[["64_65", "经营管理"],
["64_66", "销售/技工"],
["64_95", "行政/人事"],
["64_96", "物流/运输"],
["64_97", "文职/秘书"],
["64_98", "医疗/护理"],
["64_99", "业务/客服"],
["64_100", "电子/通讯"],
["64_101", "计算机/网络"]
]],
"67":["生活信息",
[["67_68", "跳蚤市场"],
["67_69", "搬家"],
["67_102", "家政保洁"],
["67_103", "管道疏通"],
["67_104", " 维修"],
["67_106", "婚庆服务"],
["67_107", "美容保健"],
["67_108", "物品交换"],
["67_109", "设计印刷"],
["67_110", "艺术收藏"],
["67_111", "书籍音像"],
["67_112", "快递物流"]
]],
"70":["吃喝玩乐",
[["70_71", "特色饭店"],
["70_72", "娱乐"],
["70_113", "足浴"],
["70_114", "酒店"],
["70_115", "酒吧"],
["70_116", "电影院"],
["70_117", "KTV"],
["70_118", "健身中心"],
["70_119", "旅行社"]
]],
"73":["交友征婚",
[["73_74", "男士征婚"],
["73_120", "女士征婚"],
["73_121", "兴趣交友"],
["73_122", "同乡会"],
["73_123", "同城活动"],
["73_124", "公益活动"]
]],
"75":["本土商城",
[["75_123", "珠宝"],
["75_126", "礼品"],
["75_127", "日用百货"],
["75_128", "服装鞋帽"],
["75_129", "体育用品"],
["75_130", "文具"],
["75_131", "茶叶"],
["75_132", "家具"]
]],
"76":["车辆买卖",
[["76_133", "新车优惠"],
["76_134", "二手车转让"],
["76_135", "二手车求购"],
["76_136", "自行车"],
["76_137", "电动车"],
["76_138", "汽车美容"],
["76_139", "驾校"],
["76_140", "维修保养"],
["76_141", "车辆违章办理"]
]],
"85":["家用电器/通讯数码",
[["85_142", "电脑设备"],
["85_143", "电冰箱"],
["85_144", "洗衣机"],
["85_145", "音响音箱"],
["85_146", "空调风扇"],
["85_147", "厨卫电器"],
["85_148", "手机/对讲机"],
["85_149", "PDA/随身听"],
["85_150", "MP3/MP4"],
["85_151", "数码相机"],
["85_152", "防盗监控"]
]],
"86":["装饰/家居/建材",
[["86_153", "装饰品牌"],
["86_154", "家具厨卫"],
["86_155", "防蚊纱窗"],
["86_156", "木业地板"],
["86_157", "陶瓷"]
]],
"87":["金融商务",
[["87_158", "信息咨询"],
["87_159", "担保贷款"],
["87_160", "法律咨询"],
["87_161", "商标专利"],
["87_162", "招商合作"],
["87_163", "工商注册"],
["87_164", "翻译"],
["87_165", "保险"]
]]
}
//重设子类
function ResetClassItem(){
var classObj = document.getElementById('ClassSelector_Type_dbl_Class');
var classTradeType = classObj.options[classObj.selectedIndex].value;
var classId = classTradeType.substring(0, classTradeType.indexOf("_"));
var tradeType = classTradeType.substring(classTradeType.indexOf("_")+1);
var classItemObj = document.getElementById('ClassSelector_Type_dbl_ClassItem');
classItemObj.options.length = 0; //清空子类
var classItemList = classList[classId][1];
for(var i = 0; i < classItemList.length; i++){
var subClass = classItemList[i];
classItemObj.options.add(new Option(subClass[1], subClass[0]));
}
ResetClassTypeTradeType();
}
//重设各分类值
function ResetClassTypeTradeType(){
var classObj = document.getElementById('ClassSelector_Type_dbl_Class');
var classTradeType = classObj.options[classObj.selectedIndex].value;
var classId = classTradeType.substring(0, classTradeType.indexOf("_"));
var tradeType = classTradeType.substring(classTradeType.indexOf("_")+1);
var classItemObj = document.getElementById('ClassSelector_Type_dbl_ClassItem');
var typeId = classItemObj.options[classItemObj.selectedIndex].value;
document.getElementById('ClassSelector_Type_txt_ClassId').value = classId;
document.getElementById('ClassSelector_Type_txt_TypeId').value = typeId;
document.getElementById('ClassSelector_Type_txt_TradeType').value = tradeType;
//if(classItemObj.onchange)
//{
//document.classid.submit();
//}
//alert(typeId);
}
function PostValue(){
document.classid.submit();
}
//加载
function InitClassSelectItem(){
var classObj = document.getElementById('ClassSelector_Type_dbl_Class');
var classItemObj = document.getElementById('ClassSelector_Type_dbl_ClassItem');
var classId = document.getElementById('ClassSelector_Type_txt_ClassId').value;
var typeId = document.getElementById('ClassSelector_Type_txt_TypeId').value;
var tradeType = document.getElementById('ClassSelector_Type_txt_TradeType').value;
if (classId.length == 0 || classId == "0"){
classId = "140001";
document.getElementById('ClassSelector_Type_txt_ClassId').value = classId;
}
if (typeId.length == 0 || typeId == "0"){
typeId = "14000101";
document.getElementById('ClassSelector_Type_txt_TypeId').value = typeId;
}
if (tradeType.length == 0 || tradeType == "0"){
tradeType = "2";
document.getElementById('ClassSelector_Type_txt_TypeId').value = tradeType;
}
//alert(classId + " " + typeId + " " + tradeType);
var _tempClassTradeType, _tempClassId, _tempTradeType;
for (var i = 0; i < classObj.options.length; i++)
{
var _tempClassTradeType = classObj.options[i].value;
var _tempClassId = _tempClassTradeType.substring(0, _tempClassTradeType.indexOf("_"));
var _tempTradeType = _tempClassTradeType.substring(_tempClassTradeType.indexOf("_")+1);
if (_tempClassTradeType == (classId+"_"+tradeType)){
classObj.selectedIndex = i;
//alert(_tempClassTradeType);
break;
}
}
//ResetClassItem();
var classItemList = classList[classId][1];
for(var i = 0; i < classItemList.length; i++){
var subClass = classItemList[i];
classItemObj.options.add(new Option(subClass[1], subClass[0]));
}
for (var i = 0; i < classItemObj.options.length; i++){
if (classItemObj.options[i].value == typeId){
classItemObj.selectedIndex = i;
//alert(typeId + " " + document.getElementById('ClassSelector_Type_txt_TypeId').value);
break;
}
}
//alert(typeId);
}
InitClassSelectItem();
</script>