很多项目用到这个功能,虽然写了不下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代码:

  1. /**
  2. select的change事件处理函数
  3. */
  4. function changeKey(){
  5. $.ajax({
  6. type:"POST",
  7. url: "xx.do",
  8. data: "action=xx&key="+this.value,
  9. dataType:"json",
  10. success: function(jsonObj){
  11. fillSelect(jsonObj,this);
  12. },
  13. error : function(XMLHttpRequest, textStatus, errorThrown) {
  14. if(401==XMLHttpRequest.status){
  15. alert("请登陆后再操作!");
  16. window.top.location.href = basepath + "login.jsp";
  17. }else{
  18. alert("服务器发生错误,请联系系统管理员!");
  19. }
  20. }
  21. });
  22. }
  23. /**
  24. 填充select的值
  25. */
  26. function fillSelect(data,elementObj){
  27. var text = "<option value=''>请选择</option>";
  28. for(var i=0,len=data.length; i<len; i++){
  29. text += "<option value='"+data[i][0]+"'>"+data[i][1]+"</option>";
  30. }
  31. $(elementObj).empty();
  32. $(elementObj).html(text);
  33. }
  34.  
  35. $(document).ready(function(){
  36. $("#zxpp").change(changeKey);
  37. });

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

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. 多线程编程中条件变量和的spurious wakeup 虚假唤醒

    1. 概述 条件变量(condition variable)是利用共享的变量进行线程之间同步的一种机制.典型的场景包括生产者-消费者模型,线程池实现等. 对条件变量的使用包括两个动作: 1) 线程等待 ...

  2. MVC自定义路由02-实现IRouteConstraint限制控制器名

    通过实现IRouteConstraint接口,实现对某个控制名进行限制.本篇把重点放在自定义约束,其余部分参考: MVC自定义路由01-为什么需要自定义路由    自定义约束前 using Syste ...

  3. centos安装sqlserver

    centos安装sqlserver 必要條件 您必须具有 RHEL 7.3 或 7.4 计算机至少 2 GB的内存. 若要在自己的计算机上安装 Red Hat Enterprise Linux,请转到 ...

  4. 如何构建Win32汇编的编程环境(ONEPROBLEM个人推荐)

      如何构建Win32汇编的编程环境(ONEPROBLEM个人推荐)1.首先要下载我提供的软件包(里面已经包含所有所需软件); 2.把它解压到D盘根目录下(如果需要安装在其它的地方,请注意设好路径); ...

  5. Appium+python自动化6-Remote远程控制

    前言 在第三篇启动app的时候有这样一行代码driver = webdriver.Remote('http://192.168.1.1:4723/wd/hub', desired_caps),很多小伙 ...

  6. uva 10618 Tango Tango Insurrection 解题报告

    Tango Tango Insurrection Time Limit: 3000MS     64bit IO Format: %lld & %llu Submit Status uDebu ...

  7. tomcat怎么运行servlet程序

    新建一个web project 取名 myproject 在myproject 新建一个继承了HttpServlet 的类 MyServlet 重写HttpServlet 的 dopost doget ...

  8. Ubuntu 12.04 安装配置 Apache2

    Apache2安装 1 我们使用root账户进行安装,首先切换到root账户,输入命令: sudo su 2 安装 Apache2 apt-get install apache2 在浏览器输入你服务器 ...

  9. C#调用C++ memcpy实现各种参数类型的内存拷贝 VS marshal.copy的实现 效率对比

    using System; using System.Runtime.InteropServices; using System.IO; namespace tx { struct ST { publ ...

  10. 利用Python爬虫爬取指定天猫店铺全店商品信息

    本编博客是关于爬取天猫店铺中指定店铺的所有商品基础信息的爬虫,爬虫运行只需要输入相应店铺的域名名称即可,信息将以csv表格的形式保存,可以单店爬取也可以增加一个循环进行同时爬取. 源码展示 首先还是完 ...