×

jquery ajax select

Select ajax 通用取值控件

天外来信 天外来信 发表于2012-09-20 11:34:27 浏览3675 评论0

抢沙发发表评论

select 控件,ajax数据加载,支持层级关系。基于jquery

 

原创代码。

 

<select name="group" id="group" class="group ajax"  data="__APP__/Ajax/getgroup_sel" key="">
</select>
<select name="part" id="part" class="part ajax" data="__APP__/Ajax/getpart_sel" parent="group">
</select>

 

/*ajax select*/
$('select.ajax').each(function(){
 var obj=$(this);
 select_get_ajax(obj);
});
$('select.ajax').change(function(){
 $('select.ajax[parent="'+$(this).attr('id')+'"]').each(function(){
  var obj=$(this);
  select_get_ajax(obj);
 });
});

//通过ajax获取select的json数据
function select_get_ajax(tobj)
{
 where=tobj.attr('parent');
 if (where==undefined){
  where='';
 }else{
  if ($('#'+where).val()){
   where=$.trim($('#'+where).val());
  }else{
   where='';
  }
 }
 //alert($(obj).attr('id'));
 $.getJSON(tobj.attr('data'),'str='+where+'&date='+Math.random(),function(json){
  json_select(tobj,json);
 });
}
//处理select的json数据
function json_select(obj,data)
{
 
 //alert(obj.attr('id'));
 obj.empty();
 $.each(data,function(i,item){
  if (obj.attr('key')==(i+''))
  {
   obj.append('<option value="'+i+'" selected>'+item+'</option>');
  }
  else
  {
   obj.append('<option value="'+i+'">'+item+'</option>');
  }
 });
}

评论列表

访客