jquery一些常用的代码总结

1、省市县三级联动

省份/直辖市


{$vo.area_name}



市


区/县

控制器的写法：

//专门定一个方法用来处理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实现的）

 

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

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

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

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

function add_pics(){
  $('#gallery-tab-show').append('

οnclick="$(this).parent().parent().parent().remove()">[-] 相册图片：

');
}

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 += '

';
          //是0即为唯一属性，显示填写的text表单，this为当前遍历到的对象
          if(this.attr_sel=='0'){
            s += this.attr_name+'：

';
            s += '';
          }else{
            //如果不是0，即为下拉菜单，单选的模式
            s += 'οnclick="add_attr(this)">[+]'+this.attr_name+'：

';
            s += '-请选择-';
            //把“可选择的值变为数组 并遍历设置到下拉列表里边”
            var zhi = this.attr_opt_vals.split(',');
            $.each(zhi,function(){
              s += ''+this+'';
            });
            s += '';
          }
          console.log(s);
          s += '

';
        });
        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('[-]');
  obj_tr.after(fuzhi_tr); //兄弟关系追加
}