很多项目用到这个功能,虽然写了不下5次以上了,一直没做过记录,记录一下,下次直接拷贝了,免得还得要重复写浪费时间。

先上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);
});

上面的代码是从项目里拷贝修改而来,可能会存在点小问题,不保证拿过去就能运行。

jquery实现下拉联动的更多相关文章

  1. Jquery Json 下拉联动

    #region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summary> /// <p ...

  2. Jquery实现下拉联动表单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery div 下拉框焦点事件

    这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...

  4. Jquery操作下拉框(DropDownList)实现取值赋值

    Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...

  5. jQuery水平下拉菜单实现

    <!DOCTYPE html> <html>    <head>       <title>jQuery水平下拉菜单实现</title>   ...

  6. jquery 获取下拉框值与select text

    下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...

  7. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  8. js,jquery获取下拉框选中的option

    js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...

  9. 一款基于jquery的下拉点击改变背景图片

    今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览   源码下载 实现的代码. html代码: <a ...

随机推荐

  1. java基础学习总结——方法的重载(overload)

    一.方法的重载 方法名一样,但参数不一样,这就是重载(overload). 所谓的参数不一样,主要有两点:第一是参数的个数不一样,第二是参数的类型不一样.只要这两方面有其中的一方面不一样就可以构成方法 ...

  2. VS增强插件 Supercharger破解教程

    Supercharger 破解教程:步骤:1.打开Supercharger的options; 2.点击Pricing & Registration 3.复制 license tt4e2HN4X ...

  3. [翻译] FreeStreamer 在线流媒体播放

    FreeStreamer https://github.com/muhku/FreeStreamer Introduction FreeStreamer is an audio player engi ...

  4. Coursera课程《大家的Python》中一些资料

    Printed copies of Python for Informatics are available for $10 or less from Amazon and $2 or less on ...

  5. 利用c#+jquery+echarts生成统计报表(附源代码)

    背景: 因为最近项目要生成报表,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.百度echarts简介请参考 http://echarts.baidu.com/ 虽然echarts功能强 ...

  6. 端口复用技术简单了解;重用端口;socket复用端口

    端口复用相关点 多个应用复用端口,只有最后一个绑定的socket可以接受数据,所有socket都可以发送数据 使用端口复用技术时,所有的socket都开启端口复用,才可以实现端口复用 黑客技术,使用标 ...

  7. 我所遭遇过的游戏中间件--PhysX

    我所遭遇过的游戏中间件--PhysX PhysX现在是Nvidia的物理中间件.其特点是简练且功能强大.当我最初拿到PHYSX的SDK时,就发现这个物理中间件比Havok要小很多,但该有的功能都有,甚 ...

  8. [10] 圆管(Pipe)图形的生成算法

    顶点数据的生成 bool YfBuildPipeVertices ( Yreal radius, Yreal assistRadius, Yreal height, Yuint slices, YeO ...

  9. Java文件操作大全

    //1.创建文件夹 //import java.io.*; File myFolderPath = new File(str1); try { if (!myFolderPath.exists()) ...

  10. Informatica 常用组件Lookup缓存之一 概述

    可以配置查找转换以高速缓存查找表.PowerCenter 将在处理高速缓存查找转换中的第一个数据行时在存储器中建立高速缓存.它将根据您在转换或会话特性中配置的数量来分配高速缓存区内存.PowerCen ...