我正在尝试生成动态<optgroup>
我想生成<optgroup>
标记,如下所示
<select>
<optgroup label="first">
<option value="first1">first1</option>
<option value="first2">first2</option>
</optgroup>
<optgroup label="second">
<option value="second1">second1</option>
<option value="second2">second2</option>
</optgroup>
</select>
使用以下代码生成动态
function loadTestScript() {
$.ajax({
type: 'GET',
url: "/getFolderList",
success: function (group) {
alert("first--------"+JSON.stringify(group)); // group prints.....["first","second"]
var html = '<option value=" ">SELECT</option>';
for (var i = 0; i < group.length; i++)
{
html += '<optGroup label="' + group[i] + '">';
$.ajax({
type: 'GET',
url: "/getTestScripts?folder=" + group[i],
success: function (data1)
{
alert("second--------"+JSON.stringify(data1)); // prints ["first1","first2"]
// prints ["second1","second2"]
for (var i = 0; i < data1.length; i++) {
html += '<option value="' + data1[i] + '">' + data1[i] + '</option>';
}
$('#testscripts').html(html);
}
});
html += '</optGroup>';
} //for
}
});
}
但是使用上面的代码我会得到<optgroup>
标记,如下所示。所有<optgroup>
首先显示,所有选项值最后逐个显示。
什么错了我的代码。请纠正我!!!!
<select>
<optgroup label="first"> </optgroup>
<optgroup label="second"> </optgroup>
<option value="first1">first1</option>
<option value="first2">first2</option>
<option value="second1">second1</option>
<option value="second2">second2</option>
</select>
答案 0 :(得分:2)
在$('#testscripts').html(html);
ajax呼叫即将完成时尝试放置getFolderList
在</optgroup>
之前插入html,因此现代浏览器会将该标记放在它自己的上面,因此你的结果就是这样。
修改 ---&gt;
以下fiddle demo可以帮助您
修改 - &gt;
ajax调用是异步的,所以如果你的数据不是很大,你就可以使它同步
ajax调用的async:false
属性可以帮助您轻松完成。
function loadTestScript(){
$.ajax({
type: 'GET',
async:false,
url: "/getFolderList",
success: function (group) {
var html = '<option value=" ">SELECT</option>';
for (var j = 0; j < group.length; j++)
{
html += '<optGroup label="' + group[j] + '">';
$.ajax({
type: 'GET',
async:false,
url: "/getTestScripts?folder=" + group[i],
success: function (data1)
{
for (var i = 0; i < data1.length; i++) {
html += '<option value="' + data1[i] + '">' + data1[i] + '</option>';
}
}
});
html += '</optGroup>';
} //for
$('#testscripts').html(html);
}
});
}
答案 1 :(得分:1)
问题是ajax
调用异步函数。也就是说,在你的for循环的下一次迭代之前,你的ajax回调中执行的代码不一定(读取:很少)执行。
一种可能的解决方案是将html存储在数组中的单独字符串中,如下所示:
$.ajax({
type: 'GET',
url: "/getFolderList",
success: function (group) {
alert("first--------"+JSON.stringify(group));
var optgroups = [];
for (var i = 0; i < group.length; i++) {
optgroups[i] = '<optGroup label="' + group[i] + '">';
$.ajax({
type: 'GET',
url: "/getTestScripts?folder=" + group[i],
success: function (data1) {
alert("second--------"+JSON.stringify(data1));
for (var j = 0; j < data1.length; j++) {
optgroups[i] += '<option value="' + data1[j] + '">' + data1[j] + '</option>';
}
optgroups[i] += '</optGroup>';
}
});
}
var html = '<option value=" ">SELECT</option>' + optgroups.join('');
$('#testscripts').html(html);
}
});
这应该替换你的for循环和它前面的 var html =
行。
答案 2 :(得分:-1)
HTML没有通过jQuery传递给适当的对象。使用$('#testscripts')。html($(html));