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>');
}
});
}