jquery Ajax 多级联动插件
程序员文章站
2022-06-11 22:36:37
...
#### 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 = $('<option value="">请选择</option>')
}
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 = '<option value="">请选择</option>';
if (data.data) {
var displayKeyStr = $this.data('displaykeys') || '',
displayKeys = displayKeyStr.split(',');
$.each(data.data, function (i, obj) {
var value = obj[key] || '';
options_str += '<option value="' + value + '" ';
var attrs = displayKeys.map(function (k) {
return "data-" + k + '="' + obj[k] + '"';
});
options_str += attrs.join(' ');
options_str += '>' + obj[valueKey] + '</option>';
});
$next_node.html(options_str);
$next_node.trigger("change");
}
}
});
});
<select class="form-control input-inline input-small ajax-linkage" data-url=""
data-nextnode="#base_l2" data-key="id" data-valuekey="name" data-displaykeys='no,size' id="base_l1" name="base_l1">
<option value="">请选择</option>...
</select>
<select class="form-control input-inline input-small ajax-linkage" data-url=""
data-nextnode="#base_l3" data-key="id" data-valuekey="name" data-displaykeys='no' id="base_l2" name="base_l2">
<option value="">请选择</option>
</select>
<select class="form-control input-inline input-small" id="base_l3" name="base_l3">
<option value="">请选择</option>
</select>
推荐阅读
-
对JQuery中Ajax应用与jQuery插件的理解与笔记
-
用户管理的设计_jquery的ajax实现二级联动效果
-
jQuery Ajax 实现分页 kkpager插件实例代码
-
jquery 实现二级/三级/多级联动菜单的思路及代码
-
写jQuery-ajax插件,XMLHttpRequest,支持回调,兼容ie、ff、360等浏览器
-
jquery ajax 读取联动菜单 select菜单
-
jquery ajax 读取联动菜单 select菜单
-
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
-
jQuery制作简洁的多级联动Select下拉框
-
jQuery多级弹出菜单插件ZoneMenu