我有以下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>");
}
});
现在您可以看到它将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>
在添加选项之前,您可以看到它关闭了选择标记。
谁能告诉我为什么会这样?
答案 0 :(得分: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
并在其中连接所有代码并将该变量追加到最后。
答案 1 :(得分:1)
尝试
$(div_subcategory).find('select').append(...)
答案 2 :(得分: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全部添加到一起,这应该更快。
答案 3 :(得分:0)
当你写这个syntex时
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);