jquery实现下拉联动
2014-10-29 15:32
169 查看
很多项目用到这个功能,虽然写了不下5次以上了,一直没做过记录,记录一下,下次直接拷贝了,免得还得要重复写浪费时间。
先上HTML代码:
JS代码:
上面的代码是从项目里拷贝修改而来,可能会存在点小问题,不保证拿过去就能运行。
先上HTML代码:
品牌: <select class="sa" id="zxpp" style="width: 120px"> <option value="">--请选择--</option> <option value="1">test</option> </select> 规格: <select class="sa" id="zxgg" style="width: 150px"> <option value="">--请选择--</option> </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=''>请选择</option>"; for(var i=0,len=data.length; i<len; i++){ text += "<option value='"+data[i][0]+"'>"+data[i][1]+"</option>"; } $(elementObj).empty(); $(elementObj).html(text); } $(document).ready(function(){ $("#zxpp").change(changeKey); });
上面的代码是从项目里拷贝修改而来,可能会存在点小问题,不保证拿过去就能运行。
相关文章推荐
- ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- JQuery实现下拉列表的联动
- springmvc+jquery实现省市区地址下拉框联动
- jQuery实现多级联动下拉列表查询框
- jquery实现下拉列框(Html.DropDownList)无刷新联动
- ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- Jquery实现下拉联动表单
- JQuery+Ajax实现下拉框联动(省市联动)
- 用Jquery实现多级下拉框无刷新的联动
- 基于MVC3方式实现下拉列表联动(JQuery)
- jQuery实例——jQuery实现联动下拉列表查询框
- C#+Jquery实现省地市三级联动下拉
- ASP.NET MVC + Jquery 实现Ajax下拉框数据三级联动
- 用Jquery实现多级下拉框无刷新的联动
- jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- 用JQuery让GT-Grid的下拉列表实现二级联动
- jQuery实现多级联动下拉列表查询框
- jQuery实现联动下拉列表查询框