很多项目用到这个功能,虽然写了不下5次以上了,一直没做过记录,记录一下,下次直接拷贝了,免得还得要重复写浪费时间。
先上HTML代码:
1 品牌: 2 <select class="sa" id="zxpp" style=" 120px"> 3 <option value="">--请选择--</option> 4 <option value="1">test</option> 5 </select> 6 7 规格: 8 <select class="sa" id="zxgg" style=" 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=''>请选择</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); });
上面的代码是从项目里拷贝修改而来,可能会存在点小问题,不保证拿过去就能运行。