[jQuery] Re: Select box show/hide
bombaru,
I had just helped another user with almost this same question. I'm lazy, so
check out this short
threadhttp://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:
h1Payment Methods/h1
pConfused about payment types? a href=#Learn more about your
payment options here./a/p
form
select
option id=value1Option 1/option
option id=value2Option 2/option
option id=value3Option 3/option
option id=value4Option 4/option
option id=value5Option 5/option
option id=value6Option 6/option
option id=value7Option 7/option
/select
/form
div class=option id=option-1Option 1/div
div class=option id=option-2Option 2/div
div class=option id=option-3Option 3/div
div class=option id=option-4Option 4/div
div class=option id=option-5Option 5/div
div class=option id=option-6Option 6/div
div class=option id=option-7Option 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
[jQuery] Re: Select box show/hide
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
threadhttp://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:
h1Payment Methods/h1
pConfused about payment types? a href=#Learn more about your
payment options here./a/p
form
select
option id=value1Option 1/option
option id=value2Option 2/option
option id=value3Option 3/option
option id=value4Option 4/option
option id=value5Option 5/option
option id=value6Option 6/option
option id=value7Option 7/option
/select
/form
div class=option id=option-1Option 1/div
div class=option id=option-2Option 2/div
div class=option id=option-3Option 3/div
div class=option id=option-4Option 4/div
div class=option id=option-5Option 5/div
div class=option id=option-6Option 6/div
div class=option id=option-7Option 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
[jQuery] Re: Select box show/hide
You could create a common function to figure out which div to open, then
bind it to the appropriate elements:
$(img.changediv).click(showfunc); //bind to images with class changediv
$(#selectid).change(showfunc); // bind to specific select element
var showfunc = function() {
if ($(this).is(select) ) {
// get correct div based on $(this).val()
}
else {
// get correct div based on img clicked
}
div.show();
}
- Original Message -
From: bombaru [EMAIL PROTECTED]
To: jQuery (English) jquery-en@googlegroups.com
Sent: Monday, October 08, 2007 12:35 PM
Subject: [jQuery] Select box show/hide
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:
h1Payment Methods/h1
pConfused about payment types? a href=#Learn more about your
payment options here./a/p
form
select
option id=value1Option 1/option
option id=value2Option 2/option
option id=value3Option 3/option
option id=value4Option 4/option
option id=value5Option 5/option
option id=value6Option 6/option
option id=value7Option 7/option
/select
/form
div class=option id=option-1Option 1/div
div class=option id=option-2Option 2/div
div class=option id=option-3Option 3/div
div class=option id=option-4Option 4/div
div class=option id=option-5Option 5/div
div class=option id=option-6Option 6/div
div class=option id=option-7Option 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.
[jQuery] Re: Select box show/hide
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.
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:
h1Payment Methods/h1
pConfused about payment types? a href=#Learn more about your
payment options here./a/p
form
select
option id=value1Option 1/option
option id=value2Option 2/option
option id=value3Option 3/option
option id=value4Option 4/option
option id=value5Option 5/option
option id=value6Option 6/option
option id=value7Option 7/option
/select
/form
div class=option id=option-1Option 1/div
div class=option id=option-2Option 2/div
div class=option id=option-3Option 3/div
div class=option id=option-4Option 4/div
div class=option id=option-5Option 5/div
div class=option id=option-6Option 6/div
div class=option id=option-7Option 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
[jQuery] Re: Select box show/hide
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
threadhttp://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:
h1Payment Methods/h1
pConfused about payment types? a href=#Learn more about your
payment options here./a/p
form
select
option id=value1Option 1/option
option id=value2Option 2/option
option id=value3Option 3/option
option id=value4Option 4/option
option id=value5Option 5/option
option id=value6Option 6/option
option id=value7Option 7/option
/select
/form
div class=option id=option-1Option 1/div
div class=option id=option-2Option 2/div
div class=option id=option-3Option 3/div
div class=option id=option-4Option 4/div
div class=option id=option-5Option 5/div
div class=option id=option-6Option 6/div
div class=option id=option-7Option 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
