Creating dynamic drop down list based on radio box selection 1

[rawle]

I'm trying to create a dynamic drop down list that will change it's contents instantly with a new selection of a radio box choice. Any ideas??

-Rawle [sig][/sig]

 

[DubnerM]

Cut from JavaScript documentation:

You can add or remove options from a selection list using this array. To add or replace an option to an existing

Select

object, you assign a new

Option

object to a place in the array. For example, to create a new

Option

object called

jeans

and add it to the end of the selection list named

myList

, you could use the following code:

jeans = new Option("Blue Jeans", "jeans", false, false);
myList.options[myList.length] = jeans;

To delete an option from a

Select

object, you set the appropriate index of the

options

array to null. Removing an option compresses the options array. For example, assume that

myList

has 5 elements in it, the value of the fourth element is

"foo"

, and you execute this statement:

myList.options[1] = null

Now,

myList

has 4 elements in it and the value of the third element is

"foo"

.
[sig]<p>Michael Dubner<br>Brainbench MVP/HTML+JavaScript<br>

http://www.brainbench.com<br>

[/sig]

 

[ChaseMIS]

It is almost a year since this thread was started, but this is the exact question I needed answered. The answer provided, however, is a little too vague for me, although I am sure it would make sense to more advanced programmers. I am still not sure how to use the array with a radio button. In my situation, I have two radio buttons and a drop down list. Depending on the radio button that is selected, I want the drop down list to include completely different information. If there are any suggestions that are more explicit, I could really use the help. Thank you.

 

[BillLumbergh]

I'm pasting in some code that I currently have. It is populating a subsequent dropdown based on the value selected in another dropdown, the only difference would be you put the onChange event on your radio button instead of on the first dropdown like I have it.

In the HTML body where you see the temporary options for cmbTerrID, they are there because Netscape 4.x is bad and will only create a box that shows one option at a time unless you force it to be larger, which is what they are doing. They get cleared out on body load as you'll note. If you're using Netscape 6 or IE 5 you don't need them.

<script LANGUAGE=&quot;Javascript1.2&quot;>

function populateTerritory(f, option) {

var terr = new Array(2);

terr[0] = new Array(16);
terr[1] = new Array(16);

terr[0][0] = &quot;Eastern Territory&quot;;
terr[1][0] = 1;

terr[0][1] = &quot;MidAtlantic Territory&quot;;
terr[1][1] = 1;

terr[0][2] = &quot;MidWestern Territory&quot;;
terr[1][2] = 1;

terr[0][3] = &quot;NorthEastern Territory&quot;;
terr[1][3] = 1;

terr[0][4] = &quot;Northwestern Territory&quot;;
terr[1][4] = 1;

terr[0][5] = &quot;SHA Load Only&quot;;
terr[1][5] = 1;

terr[0][6] = &quot;SouthEastern Territory&quot;;
terr[1][6] = 1;

terr[0][7] = &quot;SouthWestern Territory&quot;;
terr[1][7] = 1;

terr[0][8] = &quot;Western Territory&quot;;
terr[1][8] = 1;

terr[0][9] = &quot;Epic Territory&quot;;
terr[1][9] = 2;

terr[0][10] = &quot;Northern Territory&quot;;
terr[1][10] = 3;

terr[0][11] = &quot;Southern Territory&quot;;
terr[1][11] = 3;

terr[0][12] = &quot;Western Territory&quot;;
terr[1][12] = 3;

terr[0][13] = &quot;Northern Territory&quot;;
terr[1][13] = 4;

terr[0][14] = &quot;Southern Territory&quot;;
terr[1][14] = 4;

terr[0][15] = &quot;Western Territory&quot;;
terr[1][15] = 4;

var m = f.cmbTerrID;

// remove all the existing options from the Territory ID combo box
clearList(m);
addElement(m, &quot;..select Territory.. &quot;, &quot;&quot;

// populate Territory ID combo box
for (j = 0; j < 16; j++) {

if (parseInt(terr[1][j]) == parseInt(option)) {
addElement(m, terr[0][j], terr[0][j]);
}
}

m.selectedIndex = 0;
}

function addElement(list, text_in, value_in) {
var o = list.options;
var nIdx;

nIdx = o.length;

o[nIdx] = new Option(text_in, value_in);
}

function clearList(list) {
var i = 0;
var o = list.options;

for (i = o.length; i >= 0; --i)
o = null;
}

</script>

<body onLoad=&quot;populateTerritory(document.forms[0],0)&quot;>
<form ACTION=&quot;exportmember.asp&quot; name=&quot;frmMExport&quot;>

....

<tr>
<td align=&quot;right&quot; nowrap><strong>Network:</strong></td>
<td align=&quot;left&quot;><SELECT name=&quot;cmbNetworkID&quot; onChange=&quot;populateTerritory(this.form, this.form.cmbNetworkID.options[this.form.cmbNetworkID.options.selectedIndex].value)&quot;>
<option value=&quot;&quot;>..select Network..</option>
<option value=&quot;4&quot;>Caremax</option>
<option value=&quot;2&quot;>Epic</option>
<option value=&quot;5&quot;>MPPN</option>
<option value=&quot;1&quot;>Servall Buying Group</option>
<option value=&quot;3&quot;>Servall Managed Care</option>

</SELECT>
</td>
</tr>

<tr>
<td align=&quot;right&quot; nowrap><strong>Territory:</strong></td>
<td align=&quot;left&quot;>
<SELECT name=&quot;cmbTerrID&quot;>
<option value=&quot;&quot;>..select Territory..</option>
<option value=&quot;&quot;>this is temporary value number 1</option>
<option value=&quot;&quot;>this is temporary value number 2</option>
<option value=&quot;&quot;>this is temporary value number 3</option>
<option value=&quot;&quot;>this is temporary value number 4</option>
<option value=&quot;&quot;>this is temporary value number 5</option>
</select>
</td>
</tr>

 

[velle27]

i have a similar case like BillLumbergh. the only difference is that the options of the 2 dropdown list will both come from a database. the second dropdown list will include options depending on the selected data on the first dropdown. which means every time the selected data on the first dropdown changes, the list on the second dropdown will change as well. any help would be greatly appreciated.

 

[BillLumbergh]

In my page, only territories of the network type selected by the user get listed in the dropdown box, and any time the user changes the network, they get a refreshed list of territories. The code I posted was what you get from a view source, where all the ASP has already been parsed by the server. My dropdown is the same way, pulling data from a DB. You have to use ASP to create the Javascript array. I'll repaste the Javascript function with the ASP tags still in it if that helps.

function populateTerritory(f, option) {

<%
dim networkSQL, networkRS, size
networkSQL = &quot;SELECT DISTINCT t.TERRITORY_NAME, t.NETWORK_ID FROM NETWORK_TERRITORY t, NETWORK n WHERE t.NETWORK_ID = n.NETWORK_ID ORDER BY t.NETWORK_ID, t.TERRITORY_NAME&quot;

if f_adoRunSql(DConn,NULL,networkSQL,networkRS) = false then
Response.redirect &quot;..\include\error.asp&err=&quot; & Server.URLEncode(err.description)
Response.end
end if

networkRS.MoveFirst
networkRS.MoveLast
networkRS.MoveFirst

size = networkRS.RecordCount %>

var terr = new Array(2);

terr[0] = new Array(<%=networkRS.RecordCount%>);
terr[1] = new Array(<%=networkRS.RecordCount%>);

<%
dim i
i = 0
do while not networkRS.EOF %>

terr[0][<%=i%>] = &quot;<%=networkRS(&quot;TERRITORY_NAME&quot%>&quot;;
terr[1][<%=i%>] = <%=networkRS(&quot;NETWORK_ID&quot%>;

<%
networkRS.MoveNext
i = i + 1
loop

networkRS.close
set networkRS = nothing
%>

var m = f.cmbTerrID;

// remove all the existing options from the Territory ID combo box
clearList(m);
addElement(m, &quot;..select Territory.. &quot;, &quot;&quot;

// populate Territory ID combo box
for (j = 0; j < <%=size%>; j++) {

if (parseInt(terr[1][j]) == parseInt(option)) {
addElement(m, terr[0][j], terr[0][j]);
}
}

m.selectedIndex = 0;
}

 

[rajmahal]

I need a 4 radio buttons, and then a drop down associated with each one. I am trying to disable the dropdowns NOT under the currently selected radiobutton. I was wondering if anyone could help.