jQuery UI的组合框，XML和optgroups

Question

我有以下代码：

$(document).ready(function() { 

     $("#comboSubsidiary").combobox({ 

      selected: function (event, ui) { 
       var subsidiary = $("#comboSubsidiary").select().val(); 

       switch (subsidiary) { 

        case (subsidiary = "GH"): 
         $.ajax({ 
          type: "GET", 
          url: "GHworkerType.xml", 
          dataType: "xml", 
          success: function (xml) { 
           var select = $('#comboWorkerType'); 
           $(xml).find('type').each(function() { 
            var type = $(this).find('type').text(); 
            select.append("" + type + ""); 
            var id = $(this).attr('id'); 
            var name = $(this).find('name').text(); 
            var rate = $(this).find('rate').text(); 
            if (name == "Cust" || name == "Int") { 
             $('<optgroup label="' + name + '"></optgroup>').html(name).appendTo('#comboWorkerType'); 
            } 
            else { 
             $('<option>' + name + '</option>').html(name).appendTo('#comboWorkerType'); 
            } 

           }); 


           select.children(":first").text("Select worker type").attr("selected", true); 

          } 
         }); 
         break; 

        case (subsidiary = "GT"): 
         alert('Alert'); 
         break; 

       } 
      } 
     }); 
}); 

HTML：

<div class="comboTravel"> 
    <select id="comboSubsidiary" > 
     <optgroup label="Cust"> 
     <option>Select subsidiary</option> 
     </optgroup> 
    </select> 
</div> 

这是XML：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?> 
<worker> 
    <type> 
     <name>Cust</name> 
     <rate>Cust</rate> 
    </type> 
    <type> 
     <name>1</name> 
     <rate>75</rate> 
    </type> 
    <type> 
     <name>2</name> 
     <rate>83</rate> 
    </type> 
    <type> 
     <name>3</name> 
     <rate>105</rate> 
    </type> 
    <type> 
     <name>4</name> 
     <rate>115</rate> 
    </type> 
    <type> 
     <name>5</name> 
     <rate>0</rate> 
    </type> 
    <type> 
     <name>Int</name> 
     <rate>Int</rate> 
    </type> 
    <type> 
     <name>1</name> 
     <rate>75</rate> 
    </type> 
    <type> 
     <name>2</name> 
     <rate>83</rate> 
    </type> 
    <type> 
     <name>3</name> 
     <rate>105</rate> 
    </type> 
    <type> 
     <name>4</name> 
     <rate>115</rate> 
    </type> 
    <type> 
     <name>5</name> 
     <rate>0</rate> 
    </type> 
</worker> 

我想组合框显示Cust和Int作为optgroups。我怎样才能使这个工作？

此刻，所有xml节点都已正确显示在组合框中，但两个选项组未显示，并且包含在选项组中的所有内容都不显示在组合框中。

Answer 1

对不起，它不是一个完整的解决方案，但标准combobox不允许远程加载数据，所以不是重新创建，这里有一些替代方案。

对jQuery UI autocomplete (combobox): how to fill it with the result of an AJAX request?的回答包含修改后的combobox代码，您可以在其中指定值数组或远程源代码。在我看来，jQueryUI组合框是一个真正的黑客，似乎并没有被视为一流的小部件。

使用http://ivaynberg.github.com/select2/，你可能会有更好的运气，（在我看来），它有更丰富的API，看起来更干净，整体上UX更好。您需要提供formatResult函数来显示您的自定义数据，但上述链接中有很多示例。

但是，只有一点需要注意的是<optgroup>支持最近才被添加，因此您将需要最新的Select2 3.0版本，这可能会不稳定。

希望这有助于:-)