Changing the contents of a drop down list box?

[axsom1]

Is there a way for me to select a radio button and change the contents of a list box?

I currently generate my list box with some php, but I would like to dynamically rebuild the list based on the selection of a radio button without refreshing.

I was thinking of loading an array for each object selected (Acute or CCC) into some javascript then building the list from the javascript. Is this how it would be done?

How do you pass an array in php to javascript?

Here is my current list box:

<?
for ($i=0; $i<$num_results; $i++) {
$row = mysql_fetch_object($result);
echo "<option value=" . $row->id . ">" . $row->fire_loc/option>\n";
}
?>

Any help is greatly appreciated!
John

 

[Mr3Putt]

One (sorta dopey) way to do what you're after is:

In your PHP, just create each of the different <SELECT> lists, and give them unique IDs... you end up with something like:

<select id="sA" style="display:;">
  <option value="sA1">sA1</option>
  <option value="sA2">sA2</option>
  <option value="sA3">sA3</option>
</select>

<select id="sB" style="display:none;">
  <option value="sB1">sB1</option>
  <option value="sB2">sB2</option>
  <option value="sB3">sB3</option>
</select>

<select id="sC" style="display:none;">
  <option value="sC1">sC1</option>
  <option value="sC2">sC2</option>
  <option value="sC3">sC3</option>
</select>

By setting the "display:" attribute to "none", the B and C lists do not appear on the page.

For you radiobuttons, you can just launch a little Javascript that does something like:

function showList(which){
 document.getElementById('sA').style.display = (which == 'A') ? '':'none';
 document.getElementById('sB').style.display = (which == 'B') ? '':'none';
 document.getElementById('sC').style.display = (which == 'C') ? '':'none';
}

You just have to send "A" or "B" or "C" to the showList() function, and it'll show/hide the appropriate lists.

Note, when the form is submitted, ALL of the SELECT lists' values will be sent, so you may need to do some fiddling with that.

I personally like this method better than re-writing the <option> objects of the <select> object within javascript.

Just my tuppence.

Good luck with your project

 

[axsom1]

Thanks for the quick reply!!

Well I'm trying this method...but I keep getting the error the object doesnt support this property or method and it references the line:
document.getElementByID('something').....

Hmmm....will keep pluggin away at it.

Thanks,
John

 

[axsom1]

Cool...this worked.

I will play with the values that are passed in the form, but the code worked by just adding the form name and changing getElementByID to:

document.form1.elements['id name'].style.display = .....

Thanks again!!

John

 

[Mr3Putt]

Oh, one more thing...

Setting the display to '' (empty) works in IE, if I remember correctly, Netscape may require setting it to null, like:

obj.style.display = null;

The display attribute should probably be set to 'inline', rather than the empty or null value. Valid values for display are: 'none', 'inline', 'block', 'list-item'. Each value behaves slightly differently. The default value is 'inline'.

 

[axsom1]

Thanks again!

Everything working like a champ!!

In case anyone else reads this, I named each select list something different and just checked if the variable was empty before inserting the data into the database. If it is empty, the query changes slightly to reflect that.

John