很多项目用到这个功能,虽然写了不下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. What is an OPC .NET Wrapper ?

    An OPC .NET wrapper is a software layer that makes OPC COM servers accessible from a .NET client app ...

  2. duplicate symbol _main in: / linker command failed with exit code 1

    duplicate symbol _main in: /Users/mb467/Library/Developer/Xcode/DerivedData/barChartDemo-gevlnavnpan ...

  3. sql把一个表的某几列的数据存到另一个表里

    一.如何用slq语句把一个表中的某几个字段的数据插入到另一个新表中,就要用下面这条slq语句:    insert into 表名1(字段1,字段2) select 字段1,字段2 from 表名2 ...

  4. .NET:CLR via C# Primitive Thread Synchronization Constructs

    User-Mode Constructs The CLR guarantees that reads and writes to variables of the following data typ ...

  5. WebLogic Server 12c相对JBoss EAP 6的优势

    原文来自:https://blogs.oracle.com/middlewareplace/entry/why_should_you_choose_oracle 1.多数据中心部署和集群 WebLog ...

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

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

  7. insert-delete-getrandom-o1

    // 参考了下面一些讨论的解法 // https://discuss.leetcode.com/topic/53235/java-with-hashtable-arraylist/2 class Ra ...

  8. water-and-jug-problem

    以下这个解法也是参考了一些讨论: https://leetcode.com/discuss/110235/c-solution-using-euclidean-algorithm 还有这个解释原理的, ...

  9. " 初窥 " nginx

    1. 无题 第一次听到Nginx这个词,还是两年前的事儿了,最近常逛CSDN,越来越频繁的接触到这个词汇,今天看了些资料,简单的总结下,作为入门. 2. 背景介绍: Nginx (发音同 engine ...

  10. 图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法

    其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性. 要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了. 我们知道,vue和react都实现了一套虚拟D ...