动态生成optgroup标记的Jquery代码

我正在尝试生成一个动态的

我想生成如下所示的

标记

<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>

第一
前2名
第二个1
第二

使用以下代码生成动态

 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      

          }
      });
    }

函数loadTestScript（）{
$.ajax({
键入：“GET”，
url:“/getFolderList”，
成功：功能（组）{
警报（“第一个----”+JSON.stringify（组））；//组打印…[“第一个”，“第二个”]
var html='SELECT'；
对于（变量i=0；i

但是使用上面的代码，我得到了如下的

标记。所有

首先显示，所有选项值最后逐个显示。 我的代码有什么问题。请纠正我

<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>

第一
前2名
第二个1
第二

尝试放置

$（'#testscripts'）.html（html）

当

getFolderList

ajax调用即将完成时

由于在

之前插入html，因此现代浏览器会将该标记放在自己的标签上，因此您的结果就是这样

---

编辑-->

这是可能对你有帮助的

---

编辑-->

ajax调用是异步的，因此如果您的数据不是很大，您可以使其同步

ajax调用的

async:false

属性可以帮助您轻松实现这一点

函数loadTestScript（）{

$.ajax({
键入：“GET”，
async:false，
url:“/getFolderList”，
成功：功能（组）{
var html='SELECT'；
对于（var j=0；j

HTML没有通过jQuery传递到适当的对象。使用$（'#testscripts'）.html（$（html））

问题在于

ajax

异步调用函数。也就是说，在ajax回调中执行的代码不一定（读取：很少）在for循环的下一次迭代之前执行

一种可能的解决方案是将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);
    }
});

$.ajax({
键入：“GET”，
url:“/getFolderList”，
成功：功能（组）{
警报（“第一个----”+JSON.stringify（组））；
var optgroups=[]；
对于（变量i=0；i

---

这将替换for循环和它前面的

var html=

行。

请按照您的建议更正我的代码。我尝试了这种方法，但没有成功getting@Sush检查fiddle真正的问题是ajax调用的异步性质-参见我的answer@Crazysheep哦，是的，那也应该考虑。@Sush，你能试试吗此解决方案。我尝试了这种方法，但没有获得与以前相同的o/p，但您错过了

$.ajax（{type:'GET'，url:/getFolderList'，

@Sush是的，我没有复制粘贴该部分-这只是大型for循环的替换代码。请也修改它：-）@Sush我已经添加了完整的ajax功能，但是你肯定可以自己解决：）但是你的代码中遗漏了一些东西

$.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);
    }
});