Select List into an array

[Pattycake245]

I have two select lists in my form. The first will have values in it based on results from a SQL stored proc. The second one will as well, but I only want to show those items in the second select list based on the value chosen in the first. I hope I have explained myself well enough.

How can this be achieved?


Thanks, Tim

 

[LFI]

SELECT lists have ONCHANGE events associated with them so that you can populate the second list when the first list changes.

The question is, then: how are you going to get the values you need to populate the second list?

Three ways to do this that come to mind immediately:

(1) Refresh the page with the necessary parameters known (i.e., the value of the first selection is known at the time of redraw), so the second list will be populated based on that value. But refreshing is ugly and can lead to lots of complications.

(2) Keep all the possible values you need in hidden INPUT elements on the page and grab the ones you need when the first list changes. Create new options and add them to the second list. A bit processor heavy if you have to hide a lot of values.

(3) Use an invisible IFRAME (width='0%') and, with the SELECT list's ONCHANGE event, redirect the location of the IFRAME.document to a JSP that does a database hit (given the value of the first select list) and creates the OPTIONs for- and populates the second list. This is the method I would use.

Are these things familiar to you? Would you like more information?

'hope this helps.

--Dave

 

[Pattycake245]

Thanks for the input. I have never worked with iframes before. To apply your second suggestion, I am loking at a list that would cointain about 40 values in it. If you say the third is the way to go, maybe you could give me an example of how to apply it. And maybe an example of the second scenario as well.

I, of course, at this point grab all values for this second list when the form loads.

TIA, Tim

 

[LFI]

For the 3rd scenario, you would include in your HTML, something like:

<iframe id='ACTION_FRAME' width='0%'></iframe>

...then, your first select list might have something like:

<select name='select1' id='select1' onchange='update2(this.value);'>
...
</select>

Then, you would include this function in your SCRIPT section of your page:

function update2(val)
{
 var list2 = document.getElementById("select2");
 list2.options.length = 0; //clears list
 ACTION_FRAME.document.location = 'update2.jsp?val='+val;
}

Then, assuming you are already familiar with JSP's, write one called update2.jsp which gets the values of the second list based on the sent-parameter val. Then, include something like the following in that JSP:

<script>
 var pOptList = parent.document.forms[0].select2.options;
<%
 while(list2Values.next())
 {
%>
  pOptList[pOptList.length] = new Option('<%=list2Values.get("OPTION_TEXT")%>', '<%=list2Values.get("OPTION_VALUE")%>');
<%
 }
%>
</script>

This should then, from inside the IFRAME, populate the select list in your form.

Did you follow that? To me it's a little easier to explain than designing a way to do Method 2 that I described, above.

Do you think this will work for you?

--Dave

 

[Pattycake245]

Thanks for your help so far Dave. OK, so I have created a small update2.jsp and I know I am able to reference it because it is clearing out my second select list. I am trying to grasp then how the second list will be populated by whatever value is selected in the first. I suppose that if I select value1, say, from the first list then I have to correlate the second list based on what values correspond to value1?

BTW I am using Cold Fusion and SQL2000 for my webapp.

thanks, Tim

 

[Pattycake245]

I lied, I don't think it is even getting to the .jsp I created.

 

[LFI]

Can you post the function you've written to execute the JSP in the IFRAME? Also, the HTML establishing the IFRAME and the JSP code in total?

I was out Friday or I'd have responded sooner.

--Dave