很多项目用到这个功能,虽然写了不下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. HTTP的KeepAlive是开启还是关闭?

    HTTP的KeepAlive是开启还是关闭? http://itindex.net/detail/50719-http-keepalive 1.KeepAlive的概念与优势 HTTP的KeepAli ...

  2. datagrid在MVC中的运用02-结合搜索

    本文接着上一篇,来体验给datagrid加上搜索功能.主要涉及到: ※ 把一个div与datagrid相关起来 ※ datagrid接收查询参数 ※ 查询参数的封装 效果图: 查询参数封装 分页相关的 ...

  3. Android图片加载框架最全解析(七),实现带进度的Glide图片加载功能

    我们的Glide系列文章终于要进入收尾篇了.从我开始写这个系列的第一篇文章时,我就知道这会是一个很长的系列,只是没有想到竟然会写这么久. 在前面的六篇文章中,我们对Glide的方方面面都进行了学习,包 ...

  4. connection to sys should be as sysdba or sysoper 解决的方法

    连接时提示: 出现了例如以下的情况:EXP-00056;遇到ORACLE错误28009. ORA-28009:connection   to   sys   should   be   as   sy ...

  5. C语言:内存的分配与管理

    1.内存区域的划分标准: 代码段             存储代码 数据段             静态/全局数据.常量(const)      堆区(heap)           动态内存分配(更 ...

  6. mahout源码分析之DistributedLanczosSolver(五)Job over

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 1. Job 篇 接上篇,分析到EigenVerificationJob的run方法: public i ...

  7. 掌握Sed命令

    带书签PDF版,喜欢的话,欢迎多提意见和建议,你的支持是血蝙蝠最大的前进动力! http://download.csdn.net/detail/challenge_c_plusplus/6480007 ...

  8. python部分重点底层源码剖析

    Python源码剖析—Set容器(hashtable实现) python源码剖析(内存管理和垃圾回收)

  9. Best Time to Buy and Sell Stock III leetcode java

    题目: Say you have an array for which the ith element is the price of a given stock on day i. Design a ...

  10. .Net应用程序打包部署总结

    编译源代码并完成测试以后,开发过程其实并没有结束.在这个极端,需要把应用程序提供给用户.无论是ASP.NET应用程序,客户端应用程序还是 Compact Framework构建的应用程序,开发出来的软 ...