我在页面上有一个下拉列表(< select>< option>),其中id =“coclevel1”。如果当前选择的选项有子项,那么我必须添加新的下拉列表并用子项填充它。下一个下拉列表应命名为“coclevel2”,“coclevel3”等。我将为每个添加的下拉列表执行此事件。在“$(document).ready”中,我放置了:
$('[id^=coclevel]').live('change', function() {
var currElement = $(this).attr('id');
alert(currElement); //for debug
cleanUpCocOptionsAfter(currElement);
renderSubItemsOf(currElement);
});
“renderSubItemsOf(currElement);”对数据库进行查询,如果数据不为空,请添加新的下拉列表并填充它。
function cleanUpCocOptionsAfter(currElement) {
var num = $('.cocItems').length;
var currNum = parseInt(currElement.substring(8, currElement.length));
for (var i = currNum + 1; i <= num; i++) {
$('#coclevel' + i).remove();
$('#cocBr' + i).remove();
}
}
function renderSubItemsOf(currElement) {
var parentId = $('#' + currElement + ' option:selected').val();
$.getJSON('getchildrenof/' + parentId,
function() {
}).success(function(data) {
var len = data.length;
if (len > 0) {
var newElemSelector = '#' + addCocOptionAfter(currElement);
for (var i = 0; i < len; i++) {
$(newElemSelector).append($("<option></option>").attr("value", data[i].id).text(data[i].description));
}
} else {
//not developed yet
}
});
}
function addCocOptionAfter(currElement) {
// how many "duplicatable" input fields we currently have
var num = $('.cocItems').length;
var currNum = parseInt(currElement.substring(8, currElement.length));
var currElemSelector = '#' + currElement;
// the numeric ID of the new input field being added
var newNum = new Number(num + 1);
// create the new element via clone(),
//and manipulate it's ID using newNum value
var newElemId = 'coclevel' + newNum;
var newElem = $(currElemSelector).clone().attr('id', newElemId).empty();
$(newElem).append($("<option></option>").attr("value", -1).text('-- Select one --'));
// insert the new element after the last "duplicatable" input field
$(currElemSelector).after(newElem);
$(currElemSelector).after('<br/>').attr('id', 'cocBr' + newNum);
return newElemId;
}
添加新的下拉框和填充工作正常,但此后上一个下拉框丢失事件,当我尝试更改所选选项时,没有任何内容出现(浏览器不显示警报(currElement); //用于调试) 。请帮助解决这个问题。
答案 0 :(得分:2)
我不确定我理解你在问什么,但是如果你想用一个元素克隆jQuery事件处理程序,那么你需要使用.clone(true)
而不仅仅是clone()
。有关详细信息,请参阅here。
答案 1 :(得分:1)
您无需在此处使用数字ID。您应该能够通过传递DOM对象本身来更有效地执行此操作:
$('.cocItems').live('change', function() {
cleanUpCocOptionsAfter(this);
renderSubItemsOf(this);
});
function cleanUpCocOptionsAfter(currElement) {
$(currElement).nextAll('.cocItems').remove();
}
function renderSubItemsOf(currElement) {
var parentId = $(currElement).val();
$.getJSON('getchildrenof/' + parentId, function(data) {
var len = data.length;
if (len > 0) {
addCocOptionAfter(currElement, data)
} else {
//not developed yet
}
});
}
function addCocOptionAfter(currElement, data) {
var newElem = $('<select />').addClass('cocItems');
$('<option />')
.attr('value', -1)
.text('-- Select one --')
.appendTo(newElem);
$.each(data, function() {
$('<option />')
.attr('value', this.id)
.text(this.description)
.appendTo(newElem);
});
newElem.insertAfter(currElement);
return newElem;
}