Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Alert the class of a Drop down Select Box?

Status
Not open for further replies.
monkey64

monkey64

Technical User
Apr 27, 2008
69
GB
Hi. The example below uses a class to hold various URLs.
I'm using a Class as I have multiple option values with duplicate data The WC3 validator does not like ID's with
duplicate data.

My question is, how do I alert the URL of the chosen option?


Code: 
<html>
<head>
<script type="text/javascript">
function go() 
{
alert(document.getElementById("menu").class;
}
</script>
</head>

<body>
<form>
<select id="menu" onchange="go()">
<option>--Select a page--</option>
<option class="[URL unfurl="true"]http://www.bing.com">Bing</option>[/URL]
<option class="[URL unfurl="true"]http://www.microsoft.com">Microsoft</option>[/URL]
<option class="[URL unfurl="true"]http://www.altavista.com">AltaVista</option>[/URL]
<option class="[URL unfurl="true"]http://www.bing.com">Bing</option>[/URL]
</select>
</form>
</body>

</html>

Any ideas?
 
Sort by date Sort by votes
Hi

The answer to you question is [tt]className[/tt] :
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]go[/color][teal]()[/teal]
[teal]{[/teal]
  [b]var[/b] sel[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]"menu"[/i][/green][teal])[/teal]
  [COLOR=darkgoldenrod]alert[/color][teal]([/teal]sel[teal].[/teal]options[teal][[/teal]sel[teal].[/teal]selectedIndex[teal]].[/teal]className[teal]);[/teal]
[teal]}[/teal]
But the answer to your problem is [tt]value[/tt] :
HTML: 
[b]<select[/b] [maroon]onchange[/maroon][teal]=[/teal][green][i]"go(this)"[/i][/green][b]>[/b]
[b]<option>[/b]--Select a page--[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]"[URL unfurl="true"]http://www.bing.com"[/URL][/i][/green][b]>[/b]Bing[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]"[URL unfurl="true"]http://www.altavista.com"[/URL][/i][/green][b]>[/b]AltaVista[b]</option>[/b]
[b]<option[/b] [maroon]value[/maroon][teal]=[/teal][green][i]"[URL unfurl="true"]http://www.bing.com"[/URL][/i][/green][b]>[/b]Bing[b]</option>[/b]
[b]</select>[/b]
JavaScript: 
[b]function[/b] [COLOR=darkgoldenrod]go[/color][teal]([/teal]what[teal])[/teal]
[teal]{[/teal]
  [COLOR=darkgoldenrod]alert[/color][teal]([/teal]what[teal].[/teal]options[teal][[/teal]what[teal].[/teal]selectedIndex[teal]].[/teal]value[teal]);[/teal]
[teal]}[/teal]

Feherke.
 
Upvote 0 Downvote
Thanks Feherke.

My code is slightly unconventional. The reason is that I need to use both option values and classes.

Code: 
<option value="ACC101" class="acc_001.jpg">Swiss Army Knife</option>

The value tag holds the catalogue number of the product, and the class tag holds the name of the image, so I can swap it after a selection.

Your code enabled me to find a solution, and I thank you for that... Oh and the WC3 validator likes it as well.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

BobMe23
What new features have appeared in the latest versions of Java?
Replies
1
Views
45
feherke
feherke
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
744
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
335
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
367
xwb
xwb
nanbread
  • Locked
  • Question
Sweeping drop-down menus
Replies
0
Views
279
nanbread
nanbread

Part and Inventory Search

Sponsor

Back
Top