Question

我需要动态地将选项列表附加到选择字段。

我正在使用jQuery $.get函数加载我的HTML模板。在我加载的模板中是一个表行。我正在使用jQuery搜索行中的选定列并注入我的值。

问题是这些选项没有附加到我的选择框中。

有谁知道为什么这不起作用？

我的jQuery：

$.get('/js/dynamic/classes', function(newRow) {
    var existing_elem = $('.edit-table tr:last').after(newRow); 
    var appendedRow = $('table tr:last-of-type');
    appendedRow.find('td[data-th="Location"] > span').text(v.location_name);
    appendedRow.find('td[data-th="Location"] > select').empty().append('<option value="1">Test</option>');
    appendedRow.effect("highlight", {color: '#CCB4A5'}, 1000);
});

模板：

<tr>
    <td data-th="Location"><span class="edit-input-text"></span>
        <div class="plain-select select-edit">
            <select class="inp input-edit selectEdit" name="location_id"></select>
        </div>
    </td>
    <td data-th="Class type"><span class="edit-input-text"></span>
        <div class="plain-select select-edit">
            <select class="inp input-edit selectEdit" name="class_type_id"></select>
        </div>
    </td>
</tr>

Answer 1

您的select位于div，因此您的选择器td[data-th="Location"] > select错误。

删除>（表示直接子女）。

我会将您的代码更改为以下（更好的性能）

$.get('/js/dynamic/classes', function(newRow) {
    var existing_elem = $('.edit-table tr:last').after(newRow); 

    // cache any vars used multiple times
    var appendedRow = $('table tr:last-of-type'),
        cell = appendRow.children('td[data-th="Location"]'),
        select = cell.find('select');

    cell.children('span').text(v.location_name);
    select.empty().append('<option value="1">Test</option>');

    select.val('1'); // how to set the selected value as per your comment

    appendedRow.effect("highlight", {color: '#CCB4A5'}, 1000);
});

动态附加选项（jQuery）

1 个答案: