Changing HTML links to drop down selections

fifeclub posted this at 03:57 — 7th October 2006.

Joined: Feb 2001

I've got this code as a means to switch CSS styles:

	<div>
		<a href="#" onclick="setActiveStyleSheet('Red'); return false;" title="Red Style"><img src="/graphics/styleqube_red.gif" width="5" height="5" alt="" border="0" /> Yokum Red</a>
		<a href="#" onclick="setActiveStyleSheet('Blue'); return false;" title="Blue Style"><img src="/graphics/styleqube_blue.gif" width="5" height="5" alt="" border="0" /> Champlain Blue</a>
		<a href="#" onclick="setActiveStyleSheet('Green'); return false;" title="Green Style"><img src="/graphics/styleqube_green.gif" width="5" height="5" alt="" border="0" /> Adirondack Green</a>
		<a href="#" onclick="setActiveStyleSheet('Web 2.0'); return false;" title="Web 2.0"><img src="/graphics/styleqube_web20.gif" width="5" height="5" alt="" border="0" /> Web 2.0 (alternate testing)</a>
	</div>

(You can see it in use here.)

But I'd like to make it so that instead of clicking an HTML link, a visitor can use a pulldown menu that automatically initiates the action as soon as it's selected (no "Submit" button needed). Can anybody please help me convert the above code to a drop-down select code. Preferably at a slightly smaller size than normal if that's even possible. Thanks a bunch.

andy206uk posted this at 12:04 — 7th October 2006.

He has: 1,758 posts

Joined: Jul 2002

I'm no javascript wiz but isn't it something like:

 <select name="blah">
    <option onclick="setActiveStyleSheet('Red'); return false;" >Red Style</option>
    <option onclick="setActiveStyleSheet('Blue'); return false;" >Blue Style</option>
    <option onclick="setActiveStyleSheet('Green'); return false;" >Green Style</option>
    <option onclick="setActiveStyleSheet('Web 2.0'); return false;" >Web 2.0 Style</option>
  </select>

Andy

Abhishek Reddy posted this at 14:20 — 7th October 2006.

He has: 3,348 posts

Joined: Jul 2001

Whilst binding to onclick will work in some browsers for when the user clicks an option, it won't work when the option is selected by keyboard, or even at all in browsers such as Konqueror.

The onchange event is more general:

 <select name="blah" onchange="setActiveStyleSheet(this.options[this.selectedIndex].value);">
    <option value="Red">Red Style</option>
    <option value="Blue">Blue Style</option>
    <option value="Green">Green Style</option>
    <option value="Web 2.0">Web 2.0 Style</option>
  </select>

this.selectedIndex is an integer representing the selected option. this.options[] is an array of option nodes in the current select node. value holds whatever argument you want to send to the setActiveStyleSheet function.

fifeclub posted this at 01:51 — 9th October 2006.

He has: 688 posts

Joined: Feb 2001

Thanks. Worked great. Only thing I had to do is add a top dummy option directing people to "choose theme", otherwise you couldn't actually choose the top theme for some reason.

Abhishek Reddy posted this at 02:41 — 9th October 2006.

He has: 3,348 posts

Joined: Jul 2001

fifeclub;208304 wrote: Thanks. Worked great. Only thing I had to do is add a top dummy option directing people to "choose theme", otherwise you couldn't actually choose the top theme for some reason.

Good point. I presumed one of the themes would be the current theme anyway, so it would be selected by default. You can set the default option by adding selected="selected" in the option tag.