CODEWITHSUNDEEP
jqueryasp.netfunctionhtmlcombobox
user1755257
user1755257

Reputation:

JQuery opening div tag from drop down list selection

I have searched high and low (7+ hours) between this site and others for a solution to this, and nothing has worked, so here it goes.

I have a combo box, and depending on what the user chooses I need a certain div to show

<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 needs to show when option WallyS is selected. AppliDP needs to show when AppliS is selected. BBBBDP needs to show when BBBS is selected. Thanks to anyone in advance

*Edit I appreciate all the help thus far, but every time I enter a function that does anything to the combobox the show, hide functions that I have for it quit working. Here is the code for the show/hide of combobox. I know it could be shortened, but when I try it seems to mess up. The combobox that displays also needs to receive focus, and again thanks for the help.

*Edit It would seem that every time I enter in a .change function or anything except a function to retrieve the values from the combobox that it would make the combobox to where it will not appear when the EPDB radio button is selected.

$(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");
            });
        });
    });

Since the selector is an actual autocomplete combobox I will also add the code for that is well, because after more fooling around with it I am pretty certain the source of my problem might be coming from that.

(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();
            });
    });

Upvotes: 1

Views: 1214

Answers (3)

Jamie Hayman
Jamie Hayman

Reputation: 1299

Depending on how flexible you need your code, I created this version which added a class to the content areas and also changed the value of the select options. Also found a mismatch class which I corrected (walLDP to 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();
});​

DEMO: http://jsfiddle.net/yMNdD/1/

Depending what functionality you want, you can change the methods to fadeOut(), fadeIn(), slideUp(), slideDown() & more.

Upvotes: 3

jaychapani
jaychapani

Reputation: 1509

You can use onChange event on combo box

$('#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');
    }
});​

Working DEMO

Upvotes: 1

kamil
kamil

Reputation: 3522

Here's working example:

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

I've added one class for each div, if its not a problem, called hideable. Basically when change event is fired on combobox, I'm hiding all the divs (I don't know which one was shown recently, although it is doable) and then showing one according to your logic

Upvotes: 1

Related Questions