1

私はこのサイトと他のサイトの間でこれに対する解決策を探しましたが、何も機能しなかったので、ここに行きます。

私はコンボボックスを持っています、そしてユーザーが何を選択するかに応じて、私は表示するために特定のdivが必要です

<div class="ui-widget">
        <label>Select Employer: </label>
            <select id="combobox" name="combobox">
                <option value="">Select one...</option>
                <option id="WallyS" value="WallyS"> Walmart 144 Martion Way Marion, TN 55555</option>
                <option id="AppliS" value="AppliS">Appliance Mart Wax Goofy Drive Marion, TN 55555</option>
                <option id="BBBS" value="BBBS">Bed Bath and Beyond Presedential Parkway Marion, TN 55555</option>
            </select>
    </div>

<div class="WalLDP" style="display:none">content</div>
<div class="AppliDP" style="display:none">content</div>
<div class="BBBDP" style="display:none">content</div>

WallDP divは、オプションWallySが選択されたときに表示する必要があります。AppliDPは、AppliSが選択されたときに表示する必要があります。BBBBDPは、BBBSが選択されたときに表示する必要があります。事前に誰かに感謝します

*編集これまでのすべてのヘルプに感謝しますが、ショーのコンボボックスに何かを行う関数を入力するたびに、そのために持っている関数を非表示にして動作を停止します。コンボボックスの表示/非表示のコードは次のとおりです。短縮できるとは思いますが、やってみるとめちゃくちゃになってしまいます。表示されるコンボボックスもフォーカスを受け取る必要があります。また、助けてくれてありがとう。

*編集.change関数またはコンボボックスから値を取得する関数以外のものを入力するたびに、EPDBラジオボタンが選択されたときにコンボボックスが表示されない場所になります。

$(function () {
        $("[id=EPDB]").each(function (i) {
            $(this).change(function () {
                $(".ui-widget").show("fast");
            });
        });
    });

    $(function () {
        $("[id=PFB]").each(function (i) {
            $(this).change(function () {
                $(".ui-widget").hide("fast");
            });
        });
    });

    $(function () {
        $("[id=VFB]").each(function (i) {
            $(this).change(function () {
                $("ui-widget").hide("fast");
            });
        });
    });

セレクターは実際のオートコンプリートコンボボックスなので、そのためのコードも追加します。これをいじくり回した後、問題の原因はそこにあると確信しているからです。

(function ($) {
        $.widget("ui.combobox", {
            _create: function () {
                var input,
                that = this,
                select = this.element.hide(),
                selected = select.children(":selected"),
                value = selected.val() ? selected.text() : "",
                wrapper = this.wrapper = $("<span>")
                    .addClass("ui-combobox")
                    .insertAfter(select);

                function removeIfInvalid(element) {
                    var value = $(element).val(),
                    matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(value) + "$", "i"),
                    valid = false;
                    select.children("option").each(function () {
                        if ($(this).text().match(matcher)) {
                            this.selected = valid = true;
                            return false;
                        }
                    });
                    if (!valid) {
                        // remove invalid value, as it didn't match anything
                        $(element)
                        .val("")
                        .attr("title", value + " didn't match any item")
                        .tooltip("open");
                        select.val("");
                        setTimeout(function () {
                            input.tooltip("close").attr("title", "");
                        }, 2500);
                        input.data("autocomplete").term = "";
                        return false;
                    }
                }

                input = $("<input>")
                .appendTo(wrapper)
                .val(value)
                .attr("title", "")
                .addClass("ui-state-default ui-combobox-input")
                .autocomplete({
                    delay: 0,
                    minLength: 0,
                    source: function (request, response) {
                        var matcher = new RegExp($.ui.autocomplete.escapeRegex(request.term), "i");
                        response(select.children("option").map(function () {
                            var text = $(this).text();
                            if (this.value && (!request.term || matcher.test(text)))
                                return {
                                    label: text.replace(
                                        new RegExp(
                                            "(?![^&;]+;)(?!<[^<>]*)(" +
                                            $.ui.autocomplete.escapeRegex(request.term) +
                                            ")(?![^<>]*>)(?![^&;]+;)", "gi"
                                        ), "<strong>$1</strong>"),
                                    value: text,
                                    option: this
                                };
                        }));
                    },
                    select: function (event, ui) {
                        ui.item.option.selected = true;
                        that._trigger("selected", event, {
                            item: ui.item.option
                        });
                    },
                    change: function (event, ui) {
                        if (!ui.item)
                            return removeIfInvalid(this);
                    }
                })
                .addClass("ui-widget ui-widget-content ui-corner-left");

                input.data("autocomplete")._renderItem = function (ul, item) {
                    return $("<li>")
                    .data("item.autocomplete", item)
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
                };

                $("<a>")
                .attr("tabIndex", -1)
                .attr("title", "Show All Items")
                .tooltip()
                .appendTo(wrapper)
                .button({
                    icons: {
                        primary: "ui-icon-triangle-1-s"
                    },
                    text: false
                })
                .removeClass("ui-corner-all")
                .addClass("ui-corner-right ui-combobox-toggle")
                .click(function () {
                    // close if already visible
                    if (input.autocomplete("widget").is(":visible")) {
                        input.autocomplete("close");
                        removeIfInvalid(input);
                        return;
                    }

                    // work around a bug (likely same cause as #5265)
                    $(this).blur();

                    // pass empty string as value to search for, displaying all results
                    input.autocomplete("search", "");
                    input.focus();
                });

                input
                    .tooltip({
                        position: {
                            of: this.button
                        },
                        tooltipClass: "ui-state-highlight"
                    });
            },

            destroy: function () {
                this.wrapper.remove();
                this.element.show();
                $.Widget.prototype.destroy.call(this);
            }
        });
    })(jQuery);

    $(function () {
        $("#combobox").combobox();
        $("#toggle").click(function () {
            $("#combobox").toggle();
            });
    });
4

3 に答える 3

3

コードが必要とする柔軟性に応じて、コンテンツ領域にクラスを追加し、選択オプションの値も変更するこのバージョンを作成しました。私が修正した不一致クラスも見つかりました(walLDPからwallyDPへ)。

HTML:

<div class="ui-widget">
        <label>Select Employer: </label>
        <select id="combobox" name="combobox">
                <option value="">Select one...</option>
                <option id="WallyS" value="Wally"> Walmart 144 Martion Way Marion, TN 55555</option>
                <option id="AppliS" value="Appli">Appliance Mart Wax Goofy Drive Marion, TN 55555</option>
                <option id="BBBS" value="BBB">Bed Bath and Beyond Presedential Parkway Marion, TN 55555</option>
        </select>
</div>

jQuery:

$('#combobox').change(function(){
    var dropDownId = $(this).val();
    var contentBox = $('.' + dropDownId + 'DP');

    if($('.comboboxDisplay').is(':visible')){
        $('.comboboxDisplay').hide();
    };

    contentBox.show();
});​

デモ: http://jsfiddle.net/yMNdD/1/

必要な機能に応じて、メソッドを fadeOut()、fadeIn()、slideUp()、slideDown() などに変更できます。

于 2012-10-18T06:29:20.000 に答える
1

onChangeコンボボックスでイベントを使用できます

$('#combobox').change(function() {
    if ($(this).val() == 'WallyS') {
        $('.WalLDP').attr('style', 'display:visible');
        $('.AppliDP').attr('style', 'display:none');
        $('.BBBDP').attr('style', 'display:none');
    } else if ($(this).val() == 'AppliS') {
        $('.WalLDP').attr('style', 'display:none');
        $('.AppliDP').attr('style', 'display:visible');
        $('.BBBDP').attr('style', 'display:none');
    } else if ($(this).val() == 'BBBS') {
        $('.WalLDP').attr('style', 'display:none');
        $('.AppliDP').attr('style', 'display:none');
        $('.BBBDP').attr('style', 'display:visible');
    }else{
        $('.WalLDP').attr('style', 'display:none');
        $('.AppliDP').attr('style', 'display:none');
        $('.BBBDP').attr('style', 'display:none');
    }
});​

ワーキングデモ

于 2012-10-18T06:23:55.200 に答える
1

これが実際の例です:

http://jsfiddle.net/wYsdN/2/

問題がなければ、各 div に 1 つのクラスを追加しましたhideable。基本的に、コンボボックスで変更イベントが発生すると、すべての div が非表示になり (実行可能ですが、最近表示されたものはわかりません)、ロジックに従って 1 つが表示されます。

于 2012-10-18T06:17:05.400 に答える