1

我有以下代码：

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

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

4

1 回答 1

0

抱歉，这不是一个完整的解决方案，但该标准combobox不允许远程加载数据，所以与其重新发明，这里有一些替代方案。

jQuery UI 自动完成（组合框）的答案：如何用 AJAX 请求的结果填充它？包含修改后combobox的代码，您可以在其中指定值数组或远程源。在我看来，jQueryUI 组合框确实是一个 hack，似乎并不被认为是一流的小部件。

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

但是，只有一个警告是<optgroup>最近才添加支持，因此您需要最新的Select2 3.0版本，它可能不稳定。

希望这可以帮助 ：-）

于 2012-07-16T10:15:43.113 回答