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
