jquery一些常用的代码总结

最新推荐文章于 2022-10-23 23:59:02 发布

若水无华

最新推荐文章于 2022-10-23 23:59:02 发布

阅读量485

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/bj123467/article/details/52986915

版权

jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1、省市县三级联动

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>省市县三级联动</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
//定义页面的载入事件
$(function(){
//给省份下拉列表绑定一个change方法
$('#province').on('change',function(){
//先获取省份/直辖市的地区id
var provinceId = $(this).val();
//发送ajax请求
$.ajax({
url: "{:U('getAreaByAreaId')}",
type: 'POST',
dataType: 'json',
data: {pid: provinceId},
success: function(jsonObj){
//转成jQuery对象使用
//先清空原有的城市信息还需要清空区县信息
$('#city option:gt(0)').remove();
$('#district option:gt(0)').remove();
$(jsonObj).each(function(index,el){
//将获取到的城市数据追加到city下拉列表中
$('#city').append("<option value='" + el.area_id + "'>" + el.area_name + "</option>");
});
}
});
});
//给city添加change事件
$('#city').on('change',function(){
//先获取城市的地区id
var cityId = $(this).val();
//发送ajax请求
$.ajax({
url: "{:U('getAreaByAreaId')}",
type: 'POST',
dataType: 'json',
data: {pid: cityId},
success: function(jsonObj){
//清空原有的区县信息
$('#district option:gt(0)').remove();
//遍历并且追加
$(jsonObj).each(function(index,el){
//向地区下拉列表中追加数据
$('#district').append("<option value='" + el.area_id + "'>" + el.area_name + "</option>");
});
}
});
});
});
</script>
</head>

<body>
<select id='province'>
<option value="-1">省份/直辖市</option>

<volist name='province' id='vo'>
<option value="{$vo.area_id}">{$vo.area_name}</option>
</volist>
</select>
<select id="city">
<option value="-1">市</option>
</select>
<select id="district">
<option value="-1">区/县</option>
</select>
</body>

</html>

控制器的写法：

//专门定一个方法用来处理ajax请求（通过地区id获取指定地区下的下属地区）
public function getAreaByAreaId(){
//接收地区id
$pid = I('post.pid');
//先实例化数据表模型
$model = M('Areas');
$data = $model -> where(array('parent_id' => $pid)) -> select();
//以json格式输出地区信息
//echo json_encode($data);
$this -> ajaxReturn($data);
}

2、商品分类的三级联动（通过ajax实现的）

//obj是传过来的下拉框对象,mark是下级要显示的id标志
function show_catinfo(obj,mark){
var cat_ida = $(obj).val(); //获得当前分类的id信息

//第一次请求变量没有定义，之后从存储调取
if(typeof catinfo[cat_ida] === 'undefined'){
//通过ajax获取次级分类信息
$.ajax({
url:"__MODULE__/Category/getCatInfoB",
data:{'cat_ida':cat_ida},
dataType:'json',
async:false,
type:'get',
success:function(msg){
//遍历msg，使得数据与 html代码结合并追加给页面
//m为键，n为遍历到的dom对象
var s = "";
$.each(msg,function(m,n){
s += '<option value="'+n.cat_id+'">'+n.cat_name+'</option>';
});
catinfo[cat_ida] = s; //缓存请求过的分类信息
}
});
}
$('#cat_id'+mark+' option:not(:first)').remove(); //删除旧的
$('#cat_id'+mark).append(catinfo[cat_ida]); //追加新的，在内部的后边追加（即select标签的后边追加）
}
</script>

3、多图片上传，显示+按钮，和-按钮的实现

//点击+号按钮添加商品相册

//点击-号按钮移除商品相册

//注意：在js中添加的html代码之间不能有空格，所以要紧凑

function add_pics(){
$('#gallery-tab-show').append('<tr><td height="20" bgcolor="#FFFFFF" class="STYLE6"><div align="right"><span class="STYLE19" οnclick="$(this).parent().parent().parent().remove()">[-] 相册图片：</span></div></td><td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="left"><input type="file" name="pics_tu[]" /></div></td></tr>');
}

4、商品属性的添加及显示，选择不同的下拉的属性的类型，显示类型下对应的相应的属性（都是通过ajax实现的）

//把指定"类型"获得的"属性"信息给缓存起来，供下次使用
var attrinfo = new Array();
//根据"类型"获得对应的"属性"信息
function show_attr(){
var type_id = $('#type_id').val();
if(typeof attrinfo[type_id] === 'undefined'){
//走ajax，去服务器端，获得对应属性信息
$.ajax({
url:"__MODULE__/Attribute/getAttributeByType",
data:{'type_id':type_id},
dataType:'json',
async:false,
success:function(msg){
//console.log(msg);//浏览器firebug的输出工具
//msg 与 html标签整合显示到页面上
var s = "";
$.each(msg,function(){
s += '<tr><td height="20" bgcolor="#FFFFFF" class="STYLE6"><div align="right"><span class="STYLE19" style="font-style:italic;">';
//是0即为唯一属性，显示填写的text表单，this为当前遍历到的对象
if(this.attr_sel=='0'){
s += this.attr_name+'：</span></div></td><td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="left">';
s += '<input type="text" name="attr_id['+this.attr_id+'][]" />';
}else{
//如果不是0，即为下拉菜单，单选的模式
s += '<span οnclick="add_attr(this)">[+]</span><e>'+this.attr_name+'</e>：</span></div></td><td height="20" bgcolor="#FFFFFF" class="STYLE19"><div align="left">';
s += '<select name="attr_id['+this.attr_id+'][]"><option value="0">-请选择-</option>';
//把“可选择的值变为数组并遍历设置到下拉列表里边”
var zhi = this.attr_opt_vals.split(',');
$.each(zhi,function(){
s += '<option value="'+this+'">'+this+'</option>';
});
s += '</select>';
}
console.log(s);
s += '</div></td></tr>';
});
attrinfo[type_id] = s; //缓存已经获得好的属性信息
//$('#properties-tab-show tr:not(:first)').remove();//去除旧的内容
//$('#properties-tab-show').append(s)//追加
}
});
}

$('#properties-tab-show tr:not(:first)').remove();//去除旧的内容
$('#properties-tab-show').append(attrinfo[type_id])//追加
}

//为多选(单选)属性，增加项目
function add_attr(obj){
//复制一份并增加
var obj_tr = $(obj).parent().parent().parent().parent();
var fuzhi_tr = obj_tr.clone(); //复制品
//[+]变[-]
fuzhi_tr.find('span.STYLE19 span').remove();
fuzhi_tr.find('span.STYLE19 e').before('<span οnclick="$(this).parent().parent().parent().parent().remove()">[-]</span>');
obj_tr.after(fuzhi_tr); //兄弟关系追加
}

若水无华

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery一些常用的代码总结

省市县三级联动//定义页面的载入事件$(function(){//给省份下拉列表绑定一个change方法$('#province').on('change',function(){//先获取省份/直辖市的地区idvar provinceId = $(this).val();//发送ajax请求$.ajax({url: "{:U('getAre
复制链接

扫一扫