ajax多级联动效果,jquery Ajax 多级联动插件

#### js

$('select.ajax-linkage').on('change', function () {

var $this = $(this),

$next_node = $($this.data('nextnode')),

$selectedOpt = $this.find('option:selected'),

url = $this.data('url'),

key = $this.data('key') || 'id',

valueKey = $this.data('valuekey') || 'name';

if ($selectedOpt.length < 1) {

$selectedOpt = $('请选择')

}

var ajax_data = $selectedOpt.data();

ajax_data['ajax_value'] = $this.val();

$.ajax({

url: url,

type: 'get',

data: ajax_data,

dataType: 'json',

success: function (data) {

console.log('select.ajax-linkage');

var options_str = '请选择';

if (data.data) {

var displayKeyStr = $this.data('displaykeys') || '',

displayKeys = displayKeyStr.split(',');

$.each(data.data, function (i, obj) {

var value = obj[key] || '';

options_str += '

var attrs = displayKeys.map(function (k) {

return "data-" + k + '="' + obj[k] + '"';

});

options_str += attrs.join(' ');

options_str += '>' + obj[valueKey] + '

';

});

$next_node.html(options_str);

$next_node.trigger("change");

}

}

});

});

data-nextnode="#base_l2" data-key="id" data-valuekey="name" data-displaykeys='no,size' id="base_l1" name="base_l1">

请选择...

data-nextnode="#base_l3" data-key="id" data-valuekey="name" data-displaykeys='no' id="base_l2" name="base_l2">

请选择

请选择