CodingForums.com

CodingForums.com (http://www.codingforums.com/index.php)
-   JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)
-   -   Update Jump Menu Based on Radio Button Selected (http://www.codingforums.com/showthread.php?t=281261)

kmascianto 11-06-2012 05:47 PM
Update Jump Menu Based on Radio Button Selected
 
I would like to update the link options in a jump menu based on the radio button that is selected. For example, if a radio button for NFL is selected the jumpmenu would list the NFL Team Names and would go to a specific team web site if selected. If a a radio button for MLB was selected, the jump menu would list MLB teams and so on.

Can anyone help?

Thanks
Kris

Calvert Tripesi 11-06-2012 06:55 PM
The described functionality could be provided by a linked-dropdown script, the second dropdown acting as the jump menu.

jmrker 11-06-2012 08:01 PM
Here is a start to what I believe you want. Modify to your <3's content.
Adding the jump-links is easy when you provide the URLs associated with each team.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<style type="text/css">
.league { display:none; }
</style>
<script type="text/javascript">
function showLeague(info) {
  var sel = document.getElementById('leagues').getElementsByTagName('div');
  for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
  document.getElementById(info).style.display = 'block';
}
</script>
</head>
<body>
<input type="radio" name="leagues" value="AFC" onclick="showLeague(this.value)">AFC
<input type="radio" name="leagues" value="NFC" onclick="showLeague(this.value)">NFC
<input type="radio" name="leagues" value="MLB_AL" onclick="showLeague(this.value)">MLB - AL
<input type="radio" name="leagues" value="MLB_NL" onclick="showLeague(this.value)">MLB - NL
<div id="leagues">
 <div id="AFC" class="league">
  <select id="AFCteams">
  <option value=''> Choose AFC-East team </option>
  <option value='Miami Dolphins'> Miami Dolphins </option>
  <option value='Buffalo Bills'> Buffalo Bills </option>
  <option value='New England Patriots'> New England Patriots </option>
  <option value='New York Jets'> New York Jets </option>
  </select>
 </div>
 <div id="NFC" class="league">
  <select id="NFCteams">
  <option value=''> Chose NFC-East team </option>
  <option value='Dallas Cowboys'> Dallas Cowboys </option>
  <option value='New York Giants'> New York Giants </option>
  <option value='Washington Redskins'> Washington Redskins </option>
  <option value='Philadelphia Eagles'> Philadelphia Eagles </option>
  </select>
 </div>
 <div id="MLB_AL" class="league">
  <select id="ALEteams">
  <option value=''> Choose AL-East team </option>
  <option value='Tampa Bay Rays'> Tampa Bay Rays </option>
  <option value='Baltimore Oriels'> Baltimore Oriels </option>
  <option value='Boston Red Sox'> Boston Red Sox </option>
  <option value='New York Yankees'> New York Yankees </option>
  <option value='Toronto Blue Jays'> Toronto Blue Jays </option>
  </select>
 </div>
 <div id="MLB_NL" class="league">
  <select id="NLEteams">
  <option value=''> Choose NL-East team </option>
  <option value='Miami Marlins'> Miami Marlins </option>
  <option value='Atlanta Braves'> Atlanta Braves </option>
  <option value='New York Mets'> New York Mets </option>
  <option value='Philadelphia Phillies'> Philadelphia Phillies </option>
  <option value='Washington Nationals'> Washington Nationals </option>
  </select>
 </div>
</div>
</body>
</html>


All times are GMT +1. The time now is 01:06 PM.

Powered by vBulletin®
Copyright ©2000 - 2013, Jelsoft Enterprises Ltd.