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ノードがコンボボックスに正しく表示されていますが、2つのオプショングループは表示されておらず、オプショングループに含まれるすべてのものがコンボボックスに表示されていません。

4

1 に答える 1

0

申し訳ありませんが、これは完全なソリューションではありませんが、標準comboboxではデータをリモートでロードすることは許可されていないため、再発明するのではなく、いくつかの選択肢があります。

jQuery UIオートコンプリート（コンボボックス）への答え：AJAXリクエストの結果でそれを埋める方法は？combobox値の配列またはリモートソースを指定できる変更されたコードが含まれています。私の意見では、jQueryUIコンボボックスは実際にはハックであり、ファーストクラスのウィジェットとは見なされていないようです。

http://ivaynberg.github.com/select2/を使用すると、運が良くなる可能性があります。http：//ivaynberg.github.com/select2/は、APIが豊富で、見た目もすっきりしていて、全体的にUXが優れています。カスタムデータを表示する機能を提供する必要formatResultがありますが、前述のリンクにはたくさんの例があります。

ただし、サポートが追加されたのはごく最近であるため、不安定になる可能性がある最新のSelect23.0ビルド<optgroup>が必要になることに注意してください。

お役に立てれば ：-）

于 2012-07-16T10:15:43.113 に答える