把json数据转成列表

浏览数：44 / 时间：2015年06月09日

技术分享

下面是测试,自己把jquery路径改改

<!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>