jquery实现下拉联动
很多项目用到这个功能,虽然写了不下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实现下拉联动的更多相关文章
- Jquery Json 下拉联动
#region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summary> /// <p ...
- Jquery实现下拉联动表单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery div 下拉框焦点事件
这章与上一张<jquery input 下拉框(模拟select控件)焦点事件>类似 这章讲述div的焦点事件如何使用 div的焦点事件与input的焦点事件区别在于 需要多添加一个属性: ...
- Jquery操作下拉框(DropDownList)实现取值赋值
Jquery操作下拉框(DropDownList)想必大家都有所接触吧,下面与大家分享下对DropDownList进行取值赋值的实现代码 1. 获取选中项: 获取选中项的Value值: $('sele ...
- jQuery水平下拉菜单实现
<!DOCTYPE html> <html> <head> <title>jQuery水平下拉菜单实现</title> ...
- jquery 获取下拉框值与select text
下面先介绍了很多jquery获取select属性的方法,同时后面的实例我们讲的是jquery 获取下拉框值与select text代码. 下面先介绍了很多jquery获取select属性的方法,同时后 ...
- jQuery对下拉框Select操作总结
jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...
- js,jquery获取下拉框选中的option
js获取select选中的值: var sel=document.getElementById("select1"); var index = sel.selectedIndex; ...
- 一款基于jquery的下拉点击改变背景图片
今天给大家介绍一款基于jquery的下拉点击改变背景图片.单击右上角的图片,下拉显示可选择的背景图片,单击图片变为背景图.效果图下: 在线预览 源码下载 实现的代码. html代码: <a ...
随机推荐
- 在EntityFramework6中管理DbContext的正确方式——2DbContext的默认行为(外文翻译)
(译者注:使用EF开发应用程序的一个难点就在于对其DbContext的生命周期管理,你的管理策略是否能很好的支持上层服务 使用独立事务,使用嵌套事务,并行执行,异步执行等需求? Mehdi El Gu ...
- 【centOS】centos7 查看和关闭防火墙
查看防火墙状态 firewall-cmd --state running代表防火墙正在运行 停止firewall systemctl stop firewalld.service 禁止firewall ...
- 在MyEclipse中修改类不重启tomcat
今天因为在调试一个程序,因为工程中用到spring,每次修改类代码时都要重启服务器,搞得很郁闷,于是上网找找有没有可以让java代码每次修改之后 直接加载到服务器的,找了一些还果真有,不过有些方法我试 ...
- NSPredicate 的使用(持续更新)
NSPredicate 谓词工具一般用于过滤数组数据,也可用来过滤CoreData查询出的数据. 1). 支持keypath 2). 支持正则表达式 在使用之前先新建3个类 Teacher Info ...
- Oracle中表列由VARCHAR2类型改成CLOB
情景 原来表中的列定义成VARCHAR2类型,众所周知,VARCHAR2类型最大支持长度为4000.假设因为业务须要.想把此列转换为CLOB类型,在Oracle中直接通过ALTER语句转换是行不通的. ...
- 我所遭遇过的游戏中间件--PhysX
我所遭遇过的游戏中间件--PhysX PhysX现在是Nvidia的物理中间件.其特点是简练且功能强大.当我最初拿到PHYSX的SDK时,就发现这个物理中间件比Havok要小很多,但该有的功能都有,甚 ...
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
- RequireJS 参考文章
入门: http://www.cnblogs.com/snandy/archive/2012/05/22/2513652.html http://www.cnblogs.com/snandy/arch ...
- 反射 Reflect Modifier 修饰符工具类
在查看反射相关的Class.Field .Constructor 等类时,看到他们都有这样一个方法:getModifiers():返回此类或接口以整数编码的 Java 语言修饰符.如需要知道返回的值所 ...
- 机器学习的开源平台 TensorFlow
一. google第二代人工智能机器学习开源工具. http://www.tensorfly.cn/ 二. 知乎上关于机器学习的资料问答 https://www.zhihu.com/question/ ...