jqueryui组合框、xml和optgroup

我有以下代码：

$(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:

这是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显示为optgroup。我怎样才能让它工作

---

目前，所有xml节点都正确显示在组合框中，但两个OptionGroup没有显示，OptionGroup中包含的所有内容也没有显示在组合框中。

很抱歉，这不是一个完整的解决方案，但标准组合框不允许远程加载数据，因此，与其重新创建，这里有一些替代方案

的答案包含修改的组合框代码，您可以在其中指定值数组或远程源。在我看来，jQueryUI组合框实际上是一种黑客行为，似乎并不被视为一流的小部件

在我看来，您可能会更幸运地再次使用它，它的API更丰富，看起来更干净，总体上是一个更好的用户体验。您需要提供一个formatResult函数来显示自定义数据，但前面的链接中有很多示例

但是，有一点需要注意，就是最近才添加了支持，所以您需要最新的版本，这可能不稳定

希望这有助于：-

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