问题:
How to target the current id-result element for each row added ?
here is now i add the new row
function addFilterRow() {
html = '<tr id="filter-row">';
html...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
How to target the current id-result element for each row added ?
here is now i add the new row
function addFilterRow() {
html = '<tr id="filter-row">';
html += ' <td class="text-left">';
html += ' <select id="company" name="company[]" class="form-control">';
html += ' {% for company in damask_company %}';
html += ' <option name="{{ company.filter_group_id }}" value="{{ company.filter_group_id }}">{{ company.name }}</option>';
html += ' {% endfor %}';
html += ' </select>';
html += '</td>';
html += '<td class="text-left" id="result"></td>';
html += '</tr>';
$('tbody').append(html);
}
here is how i try to append it
$(document).on('change', 'select#company', function(e) {
e.preventDefault();
var div = $('td#result', this);
var id = $(this).val();
var url = "index.php?route=catalog/product/getCat&user_token={{ user_token }}&filter_group_id=" + id;
$.ajax({
type: "GET",
url: url,
success: function(data) {
$(data).appendTo(div);
}
});
});
回答1:
To achieve this you can use common classes on the elements and DOM traversal to find the content related to the select
which raised the change
event. This has the added benefit of avoid the id
conflict you're creating, as id
have to be unique within the DOM.
Firstly amend all the id
attributes to classes:
function addFilterRow() {
html = '<tr class="filter-row">';
html += ' <td class="text-left">';
html += ' <select name="company[]" class="company form-control">';
html += ' {% for company in damask_company %}';
html += ' <option name="{{ company.filter_group_id }}" value="{{ company.filter_group_id }}">{{ company.name }}</option>';
html += ' {% endfor %}';
html += ' </select>';
html += ' </td>';
html += ' <td class="text-left result"></td>';
html += '</tr>';
$('tbody').append(html);
}
Now you can amend your event handler to retrieve the sibling td
:
$(document).on('change', 'select.company', function(e) {
e.preventDefault();
var $result = $(this).closest('tr').find('td.result');
$.ajax({
type: "GET",
url: "index.php?route=catalog/product/getCat&user_token={{ user_token }}&filter_group_id=" + $(this).val(),
success: function(data) {
$result.append(data);
}
});
});
回答2:
You have to reset the old id="result" before appending the new id="result" by doing this
$.ajax({
type: "GET",
url: url,
success: function(data) {
$("#result").attr("id", "");
$(data).appendTo(div);
}
});
This will remove the attribute ID result to "" empty and then your new id of result will start working. Otherwise it will select the first id of result always.