首页 > 代码库 > jquery实现下拉联动
jquery实现下拉联动
很多项目用到这个功能，虽然写了不下5次以上了，一直没做过记录，记录一下，下次直接拷贝了，免得还得要重复写浪费时间。
先上HTML代码：
1 品牌: 2 <select class="sa" id="zxpp" style="width: 120px"> 3 <option value="">--请选择--</option> 4 <option value="1">test</option> 5 </select> 6 7 规格： 8 <select class="sa" id="zxgg" style="width: 150px"> 9 <option value="">--请选择--</option>10 </select>
JS代码：
/** select的change事件处理函数*/function changeKey(){ $.ajax({ type:"POST", url: "xx.do", data: "action=xx&key="+this.value, dataType:"json", success: function(jsonObj){ fillSelect(jsonObj,this); }, error : function(XMLHttpRequest, textStatus, errorThrown) { if(401==XMLHttpRequest.status){ alert("请登陆后再操作!"); window.top.location.href = basepath + "login.jsp"; }else{ alert("服务器发生错误,请联系系统管理员!"); } } });}/** 填充select的值*/function fillSelect(data,elementObj){ var text = "<option value=http://www.mamicode.com/‘‘>请选择"; for(var i=0,len=data.length; i<len; i++){ text += "<option value=http://www.mamicode.com/‘"+data[i][0]+"‘>"+data[i][1]+"</option>"; } $(elementObj).empty(); $(elementObj).html(text);}$(document).ready(function(){ $("#zxpp").change(changeKey);});
上面的代码是从项目里拷贝修改而来，可能会存在点小问题，不保证拿过去就能运行。
jquery实现下拉联动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。