Karl, I was thinking that the ids seemed unnecessary too, but then I thought
that maybe he'd want to show only a subset of the items rather than all or
nothing.
Chris
On 10/8/07, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> Here is one way you could do it, based on the index of the options and
> divs:
>
> $(document).ready(function() {
> var $optionDivs = $('div[id^=option]').hide();
> $('select').change(function() {
> var i = $('option', this).index( $(':selected')[0]);
> $optionDivs.hide().eq(i).show();
> });
> });
>
> tested successfully in FF 2.0.0.7
>
> The IDs on those divs seem superfluous. You could do the same thing with a
> common class:
> $('div.options').hide(); // etc.
> Or you could wrap all of those divs in another div with an id of
> "options":
> $('#options > div').hide() // etc.
>
> Hope that helps.
>
> --Karl
> _________________
> Karl Swedberg
> www.englishrules.com
> www.learningjquery.com
>
>
>
> On Oct 8, 2007, at 4:23 PM, Chris Jordan wrote:
>
> Also, I just noticed this code:
> $(document).ready(function() {
> // (hide the divs on initial view)
> $('#option-1').hide();
> $('#option-2').hide();
> $('#option-3').hide();
> $('#option-4').hide();
> $('#option-5').hide();
> $('#option-6').hide();
> $('#option-7').hide();
>
> // (need help figuring out how to trigger the show)
>
> });
>
> you could simplify that code like this:
> $("div[id^='option']").hide();
>
> This says, get me all the elements of type div that have the attribute
> 'id' that starts with 'option'.
>
> Seven lines to one line! Isn't that cool!?
>
> Have fun!
>
> Chris
>
> On 10/8/07, Chris Jordan <[EMAIL PROTECTED]> wrote:
> >
> > bombaru,
> >
> > I had just helped another user with almost this same question. I'm lazy,
> > so check out this short
> > thread<http://groups.google.com/group/jquery-en/browse_thread/thread/61f29abca67a866c/075832c811ad0ee3#075832c811ad0ee3>
> > .
> >
> > He was doing things on a click, but you could do them on the change
> > event. I've not used this event in jQuery so I'm making an assumption that
> > it's covered. Why wouldn't it be, right?
> >
> > so in the code in that thread I do something like:
> >
> > $(".someClass").bind("click", function(){
> > // function goes here...
> > });
> >
> > you would do something like:
> >
> > $("#mySelectBoxElement").bind("change", function(){
> > // function goes here...
> > });
> >
> > or I think you could do:
> > $("#mySelectBoxElement").change(function(){
> > // function goes here...
> > });
> >
> > I'm not sure which is the preferable syntax. I think it's a matter of
> > style. I tend to use the bind function.
> >
> > I hope this helps.
> >
> > Cheers,
> > Chris
> >
> >
> > On 10/8/07, bombaru <[EMAIL PROTECTED]> wrote:
> > >
> > >
> > > Does anyone have any examples of how I could use a select box to show/
> > > hide different divs on a page. To take it a level further, I would
> > > also like the same behavior to work if images are clicked.
> > >
> > > A little background: I'm tring to build a payment options page and
> > > have a list of payment icons (Visa, MC, AmEx, etc) as well as a select
> > > box that lists the options. The page would have all the forms in
> > > their own DIVs with an ititial value set to hide();. clicking on an
> > > image would result in showing the appropriate DIV for that option as
> > > well as changing the select box to alert the customer of their
> > > choice. Using the select box would have the same behavior but no need
> > > to highlight the image. Does this make any sense?
> > >
> > > I've been messing around with this for a while and can not seem to get
> > >
> > > anything to work. I'd appreciate any help you might be able to offer
> > > me. Here's an example of the page:
> > >
> > > <h1>Payment Methods</h1>
> > > <p>Confused about payment types? <a href="#">Learn more about your
> > > payment options here.</a></p>
> > > <form>
> > > <select>
> > > <option id="value1">Option 1</option>
> > > <option id="value2">Option 2</option>
> > > <option id="value3">Option 3</option>
> > > <option id="value4">Option 4</option>
> > > <option id="value5">Option 5</option>
> > > <option id="value6">Option 6</option>
> > > <option id="value7">Option 7</option>
> > > </select>
> > > </form>
> > > <div class="option" id="option-1">Option 1</div>
> > > <div class="option" id="option-2">Option 2</div>
> > > <div class="option" id="option-3">Option 3</div>
> > > <div class="option" id="option-4">Option 4</div>
> > > <div class="option" id="option-5">Option 5</div>
> > > <div class="option" id="option-6">Option 6</div>
> > > <div class="option" id="option-7">Option 7</div>
> > >
> > > <script type="text/javascript">
> > > $(document).ready(function() {
> > > // (hide the divs on initial view)
> > > $('#option-1').hide();
> > > $('#option-2').hide();
> > > $('#option-3').hide();
> > > $('#option-4').hide();
> > > $('#option-5').hide();
> > > $('#option-6').hide();
> > > $('#option-7').hide();
> > >
> > > // (need help figuring out how to trigger the show)
> > >
> > > });
> > > </script>
> > >
> > > Thanks for your help.
> > >
> > >
> >
> >
> > --
> > http://cjordan.us
>
>
>
>
> --
> http://cjordan.us
>
>
>
--
http://cjordan.us
