ansaurus

Question

Answer 1

+1 A:

List options and div tags can be identified and toggled the same way.

$('#div_id').toggle();

So instead of using an element selector to select an option tag like the asmselect plugin you referenced uses, just modify the element selector to select a div tag on the page.

Jeremy 2010-05-04 17:04:46

Thanks Jeremy. I can't seem to get it working, can you take a look at my code above.

Jeffrey 2010-05-04 17:34:49

Actually, this code looks good and I was able to make it work. What is the error you are seeing? My only suggestion would have been to change the line that you define theDiv on to be a string instead of an element object. For example: var theDiv = ".is" + value;This way, you would be calling $(theDiv) like I would have done it. But as I said, your way worked just fine for me. Post the error and what browser you are using and perhaps I can offer a different suggestion.

Jeremy 2010-05-04 18:13:33

It works in mozilla for me, but not webkit.

Jeffrey 2010-05-04 18:24:38

try changing the value of theDiv and testing on webkit. My guess is that will fix it. I would try it for you but I don't have access to a webkit browser.

Jeremy 2010-05-04 20:55:57

Answer 2

+1 A:

Were you looking for something like this? http://jsfiddle.net/tYvQ8/

$("#theSelect").change(function() {          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown().removeClass("hidden");
    theDiv.siblings('[class*=is]').slideUp(function() { $(this).addClass("hidden"); });
});

When the select option changes, you

Reveal the selected div with slideDown() and remove its hidden class.
Find the divs siblings that have "is" in the class name. (Be easier if the menu wasn't a sibling.)
Hide the previously displayed siblings with slideUp(), which takes a callback to add the hidden class after the slideUp() is complete

Here's another (in my opinion, better) way: http://jsfiddle.net/tYvQ8/1/

Get rid of your hidden class, and use jQuery to hide them. Then you don't have to worry about adding and removing the class.

HTML without hidden class

<body>
    <div class="selectContainer">
        <select id="theSelect">
            <option value="">- Select -</option>
            <option value="Patient">Patient</option>
            <option value="Physician">Physician</option>
            <option value="Nurse">Nurse</option>
        </select>
    </div>
    <div class="isPatient">Patient</div>
    <div class="isPhysician">Physician</div>
    <div class="isNurse">Nurse</div>
</body>

jQuery

$('[class^=is]').hide();

$("#theSelect").change(function(){          
    var value = $("#theSelect option:selected").val();
    var theDiv = $(".is" + value);

    theDiv.slideDown();
    theDiv.siblings('[class^=is]').slideUp();
});

patrick dw 2010-05-14 12:12:51

This works. Grazie!

Jeffrey 2010-05-18 18:16:11

I'm now looking to add to this to make it like the asmselect plugin so that it will display multiple divs and disable them on the selector. Any ideas?

Jeffrey 2010-05-18 23:43:53

ansaurus

tags:

views:

answers:

jQuery toggle div from select option

related questions