Newbie: Load one of two arrays to a list box based on a radio button

[kathryn]

Good morning:

My form will allow users to select one of two locations, using radio buttons. Depending on which radio button is chosen, I want one of two different lists (arrays??) of departments to appear in the list box.

Does anyone have any references or resources to help me get started on this?

Thanks.

Kathryn

 

[iza]

-> on the input type=radio, add the onchange() event : should look like : <input type=radio name=whatever value=whatever onchange=&quot;javascript:foo()&quot;>
this will call the &quot;foo&quot; function when the value of the radio button is changed
-> now the foo function ... it depends on which browser you are targetting ... i might post a faq on this (dynamically building/filling/changing listboxes) some day anyway

 

[palbano]

Kathryn,

Another technique depending on browser compatibility is to put both list boxes in the page and use 'visibilty' to show the one currently selected.

Good luck
-pete

 

[kathryn]

I am using IE 4+.

Can I do this:

<input type=radio name=Location value=1 onchange=&quot;javascript:foo(1)&quot;>
<input type=radio name=Location value=2 onchange=&quot;javascript:foo(2)&quot;>


then create a javascript procedure that uses the parameter passed in to decide which listbox to show?





Kathryn

 

[jaredn]

if your using IE4 its simple just use:

<script>

function toggleVis(oSelect)
{
oSelect.style.visibility=&quot;visible&quot;
hideother=window.eval(oSelect.notyou)
hideother.style.visibility=&quot;hidden&quot;
}

</script>

<input type=radio name=Location style=&quot;cursor:hand;&quot; value=1 id=&quot;first&quot; onClick=&quot;toggleVis(dept1)&quot; checked><label style=&quot;cursor:hand;&quot; for=&quot;first&quot;>Show Dept 1</label><br>
<input type=radio name=Location style=&quot;cursor:hand;&quot; value=2 id=&quot;second&quot; onClick=&quot;toggleVis(dept2)&quot;><label style=&quot;cursor:hand;&quot; for=&quot;second&quot;>Show Dept 2</label>
<br><br>
<select notyou=&quot;dept2&quot; id=&quot;dept1&quot; style=&quot;visibility:visible;&quot;><option>Department 1</option></select>
<select notyou=&quot;dept1&quot; id=&quot;dept2&quot; style=&quot;visibility:hidden;&quot;><option>Department 2</option></select>

Sure there's an even easier way to do this, but thats what I whipped up. This won't work in Netscape. jared@aauser.com

 

[iza]

yes, as jaredn says you can use onclick instead of onchange
yes your code was good
and yes the hiding/showing is a good idea.
btw i've written a function to diplay an array values in a listbox, it's in the javascript's forum's faq, it's not using hiding/showing.