Question

我正在尝试生成动态<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>

Answer 1

在$('#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);
      }
  });
}

Answer 2

问题是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 =行。~~

Answer 3

HTML没有通过jQuery传递给适当的对象。使用$（'＃testscripts'）。html（$（html））;

Jquery代码动态生成optgroup标记

3 个答案: