0

我有以下ajax：

$.ajax({
    type: 'POST',
    url: myBaseUrl + 'Products/ajax_get_subcategories',
    dataType: 'json',
    data: {
        id: id
    },
    success: function (data) {
        var length = data.length;
        var div_subcategory = $('#subcategory');
        div_subcategory.html('');
        div_subcategory.append(
            "<select id='subcategory' name='data[Product][subcategory_id]'>"
        );
        for (var i = 0; i < length; i++) {
            var id = data[i]['Subcategory']['id'];
            var name = data[i]['Subcategory']['name'];
            $('#subcategory').append(
                "<option value=''+id>" + name + "</option>"
            );
        }
        div_subcategory.append("</select>");
    }
});

现在你可以看到它将 a 附加select到一个div块中。

但！这里有一个问题是调用 ajax 后 HTML 的输出：

    div id="subcategory" class="subcategory">
<select id="subcategory" name="data[Product][subcategory_id]"></select>
<option +id="" value="">Telte</option>
<option +id="" value="">Toilet</option>
<option +id="" value="">Service</option>
<option +id="" value="">Borde</option>
<option +id="" value="">Stole</option>
<option +id="" value="">Lyd og lys</option>
</div>

如您所见，它在添加选项之前关闭了选择标签。

谁能告诉我为什么会这样？

4

4 回答 4

1

尝试

更改您的成功代码

success: function (data) {
    var length = data.length;
    var div_subcategory = $('#subcategory');
    div_subcategory.html('');
    var select_append = "<select id='subcategory' name='data[Product][subcategory_id]'>";
    for (var i = 0; i < length; i++) {
        var id = data[i]['Subcategory']['id'];
        var name = data[i]['Subcategory']['name'];
        select_append += "<option value=''" + id + ">" + name + "</option>";
    }
    select_append += "</select>"
    div_subcategory.append(select_append);
}

创建一个变量select_append并在其中连接所有代码并在最后附加该变量。

于 2013-11-12T12:47:53.937 回答
1

尝试

$(div_subcategory).find('select').append(...)
于 2013-11-12T12:48:25.770 回答
1

当你写：

div_subcategory.append("<select id='subcategory' name='data[Product][subcategory_id]'>");

jQuery 将插入

<select id='subcategory' name='data[Product][subcategory_id]'></select>

并且因为div_subcategory将与您将匹配 div 的选择具有相同的 id。

相反，我会通过在字符串中创建 html 并一次性注入它来编写它。

    var html += "<select id='subcategorysel' name='data[Product][subcategory_id]'>";
    for (var i = 0; i < length; i++) {
        var id = data[i]['Subcategory']['id'];
        var name = data[i]['Subcategory']['name'];
        html += "<option value=''+id>" + name + "</option>";
    }
    html += "</select>";
    div_subcategory.append(html);

此代码段会更新您的代码以使用不同的 id 并一次性附加 html，这应该会更快。

于 2013-11-12T12:50:51.510 回答
0

当你写这个语法时

div_subcategory.append(
        "<select id='subcategory' name='data[Product][subcategory_id]'>"
    );

DOM 会自动检测这样的 HTML 元素

<select id='subcategory' name='xxx'></select>

然后在此之后附加其他选项元素

所以解决方案是首先制作一个HTML字符串，然后追加

var html = "<select id='subcategory' name='data[Product][subcategory_id]'>";
    for (var i = 0; i < length; i++) {
        var id = data[i]['Subcategory']['id'];
        var name = data[i]['Subcategory']['name'];
        html += "<option value='' + id>" + name + "</option>";
    }
    div_subcategory.append(html);
于 2013-11-12T12:52:25.277 回答