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:
<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.
