http://www.cnblogs.com/zbseoag/p/4390596.html
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>测试</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://test.com/Js/jquery.js"></script>
</HEAD>
<BODY>
<select name="test"></select>
<br/><br/><br/>
<select name="province">
<volist name="province" id="row">
<option value="{$row['area_id']}">{$row['title']}</option>
</volist>
</select>
<ul name="city"></ul>
<script type="text/javascript">
$.fn.ajaxSelect = function(url, options, func){
var defaults = {send:{data:{}, key:'id', attr:'value'}, event:'change', func: null};
if(typeof func == 'function') options.func = func;
var settings = $.extend(true, defaults, options);
return this.on(settings.event, function(){
settings.send.data[settings.send.key] = $(this).prop(settings.send.attr);
$.get(url, settings.send.data, function(data){
if(typeof settings.func == 'function') settings.func(data, $(this));
});
});
};
$.fn.jsonList = function(options, func){
var defaults = {data:[], name:'name', value:'value', option:'<option value="value">name</option>', func: null};
if(typeof func == 'function') options.func = func;
var settings = $.extend(defaults, options);
return this.each(function(){
var options = (settings.option.search(/<option\b/) > -1)? '<option value="">请选择</option>' : '';
var data = settings.data;
for(var i in data){
if(typeof settings.name == 'object'){
textString = settings.name.string;
for(var j in settings.name.field){
textString = textString.replace(settings.name.field[j], data[i][settings.name.field[j]]);
}
}else{
textString = data[i][settings.name];
}
if(typeof settings.value == 'object'){
valueString = settings.value.string;
for(var j in settings.value.field){
valueString = valueString.replace(settings.value.field[j], data[i][settings.value.field[j]]);
}
}else{
valueString = data[i][settings.value];
}
var line = settings.option.replace(/"value"/, '"'+valueString+'"');
options += line.replace(/>name</, '>'+textString+'<');
}
$(this).html(options);
if(typeof settings.func == 'function') settings.func($(this));
});
};
var data = [
{"area_id":"1111","title":"aaaa"},
{"area_id":"222","title":"bbb"},
{"area_id":"333","title":"ccc"},
{"area_id":"444","title":"ddd"},
];
$('[name="test"]').jsonList({
data:data,
name:{field:['title','area_id'], string:'title-(area_id)'},
value:'area_id',
option:'<option value="value">name</option>'
},
function(){
alert('json数组转成列表成功');
});
$('select[name="province"]').ajaxSelect("{:U('Tool/getCity')}", { send:{key:'province_id', attr:'value'}}, function(data, parent){
$('[name="city"]').jsonList({data:data, name:{field:['title','area_id'], string:'title-(area_id)'}, value:'area_id', option:'<li><a href="#" data-value="value">name</a></li>'}, function(){ alert('加载完成')});
});
</script>
</BODY>
</HTML> 最佳答案
