Select Box Content

[TimUSA]

This is a nice little code snippet I found at Dynamic Drive. If your front page is tight on real estate, it could come in handy!

Code Select Expand


<script type="text/javascript">
/*
Combo-Box Viewer script- Created by and © Dynamicdrive.com
Visit http://www.dynamicdrive.com/ for this script and more
This notice MUST stay intact for legal use
*/

if (document.getElementById){
document.write('<style type="text/css">\n')
document.write('.dropcontent{display:none;}\n')
document.write('</style>\n')
}

function contractall(){
if (document.getElementById){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
}

function expandone(){
if (document.getElementById){
var selectedItem=document.dropmsgform.dropmsgoption.selectedIndex
contractall()
document.getElementById("dropmsg"+selectedItem).style.display="block"
}
}

if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)
</script>

<form name="dropmsgform">
    <select name="dropmsgoption" onChange="expandone()" size="1" style="width: 300px;">
    <option selected="selected">Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
    </select>
   
    <div id="dropmsg0" class="dropcontent"><strong><strong></strong></strong>
    <p>Option 1 here.</p>
    </div>
   
    <div id="dropmsg1" class="dropcontent"><strong><strong></strong></strong>
    <p>Option 2 here.</p>
    </div>
   
    <div id="dropmsg2" class="dropcontent"><strong><strong></strong></strong>
    <p>Option 3 here.</p>
    </div>
   
    <div id="dropmsg3" class="dropcontent"><strong><strong></strong></strong>
    <p>Option 4 here.</p>
    </div>
   
    <div id="dropmsg4" class="dropcontent"><strong><strong></strong></strong>
    <p>Option 5 here.</p>
    </div>
</form>


[TimUSA]

Was playing with this some today and here is a problem i am having. I am trying to make the option items from a query:

Code Select Expand

global $scripturl;

$query1 = "SELECT `seriesName`
FROM `series_table`
WHERE seriesID NOT IN (1 , 2)
ORDER BY seriesID DESC
LIMIT 0,10
;";
$result = mysql_query($query1);

echo'
<script type="text/javascript">
/*
Combo-Box Viewer script- Created by and © Dynamicdrive.com
Visit http://www.dynamicdrive.com/ for this script and more
This notice MUST stay intact for legal use
*/

if (document.getElementById){
document.write(\'<style type="text/css">\n\')
document.write(\'.dropcontent{display:none;}\n\')
document.write(\'</style>\n\')
}

function contractall(){
if (document.getElementById){
var inc=0
while (document.getElementById("dropmsg"+inc)){
document.getElementById("dropmsg"+inc).style.display="none"
inc++
}
}
}

function expandone(){
if (document.getElementById){
var selectedItem=document.dropmsgform.dropmsgoption.selectedIndex
contractall()
document.getElementById("dropmsg"+selectedItem).style.display="block"
}
}

if (window.addEventListener)
window.addEventListener("load", expandone, false)
else if (window.attachEvent)
window.attachEvent("onload", expandone)
</script>';

echo'
<select name="dropmsgoption" onChange="expandone()" size="1">';
while($row = mysql_fetch_row($result))
{
echo'
<option value=\"' . $row[0] . '\">' . $row[0] . '</option>';
}
echo'
</select>
<div id="dropmsg0" class="dropcontent">';
$series = mysql_real_escape_string($_POST['dropmsgoption']);
$seriesq = "SELECT seriesID
FROM series_table
WHERE seriesName = '$series';";
$result2 = mysql_query($seriesq);
$row2 = mysql_fetch_row($result2);
$seriesID = $row2[0];
$raceq = "SELECT pts_table.skipperName, sum( pts_table.racePoints ) AS sumseries
FROM pts_table
LEFT OUTER JOIN race_table ON pts_table.raceID = race_table.raceID
WHERE race_table.seriesID = '$seriesID'
GROUP BY pts_table.skipperName
ORDER BY sumseries DESC;";
$result3 = mysql_query($raceq);
echo'
<table class = "bordercolor" cellSpacing="1" cellPadding="1" width="95%" border="0">
  <tr class ="catbg">
    <td width = "100%">' . $series . '</td>
  </tr>
</table>
<table class = "bordercolor" cellSpacing="1" cellPadding="1" width="95%" border="0">
  <tr class ="catbg4">
    <td width = "75%">Skipper Name:</td>
    <td width = "25%">Total Race Points:</td>
  </tr>
</table>';
$x = 1;
while($row3 = mysql_fetch_array($result3))
{
echo'
<table class = "bordercolor" cellSpacing="1" cellPadding="1" width="95%" border="0">
  <tr>
  <td width = "75%" class = "titlebg">' . $x++ . ':  ' . $row3['skipperName'] . '</td><br>
  <td width = "25%" class = "catbg2">' . $row3['sumseries'] . '</td><br>
  </tr>
</table>';
}
echo'
<div>';

I have two problems:

1. Could there be a way that this line would only need occur once, so that I wouldnt have to create a new <div> for each option in the list.

Code Select Expand

<div id="dropmsg0" class="dropcontent">
...stuff here
</div>';

2. The code inside the <div> is code I am using on a different page that also uses the select to get the string for a future variable $seriesid. I obviously cannot use this in this way because their is no $_post using this script

Code Select Expand

$series = mysql_real_escape_string($_POST['dropmsgoption']);
$seriesq = "SELECT seriesID
FROM series_table
WHERE seriesName = '$series';";
$result2 = mysql_query($seriesq);
$row2 = mysql_fetch_row($result2);
$seriesID = $row2[0];

Any ideas here would be greatly appreciated, or an alternatives.