making div appear on dropdown selection

**Dom Leonard** · Jul 20 '05, 12:50 PM

Re: making div appear on dropdown selection

middletree wrote:
....[color=blue]
> note that because it's an Intranet, all users have to use IE 5 or higher.
>
> Situation:
> 3 form fields on an ASP. <select> box, set of 2 radio buttons, and a text
> field.
> <Select> box, built by ASP from SQL Server table. One of the 7 choices in
> there is the word Closed (Value of 1). When someone selects Closed, I want
> a previously hidden div to appear, and it will contain 2 radio buttons (or
> a <select> would be fine), with the text of (1)Final Analysis, or (2)Resolution.
> Whichever a user selects of these two radio buttons will
> populate the text field called BriefDesc with the phrase Final Analysis or
> Resolution.
>
> In other words, when a trouble ticket is closed, the boss wants
> the tech support people to have the words Final Analysis or Resolution on
> the Brief Description field, and this is a way of forcing it to happen, and
> keeping it from being mispelled.
>
> Important to note that I cann't hard-code the values of the dropdown. I wish
> I could, but I have to make sure that the current value showed up as selected,
> so I am using my ASP function below to do that.[/color]

Can the current value be closed?[color=blue]
>
> Anyway, the page loads fine using the code below; I get no error messages.
> But when I click the word Closed, nothing happens.[/color]

Because there is no event handler assigned to the Select element to do
anything?
[color=blue]
>
>
> Here's what I have:
>
> In the head section, I have
>
>
> <script language="JavaS cript">
> //this is to make the briefdesc field do great things when the status is
> changed to 'closed'
> function displayRadios(m enu){
> if(menu[menu.selectedIn dex].text=="Closed" ){
> document.getEle mentById(el).st yle.display="bl ock"[/color]
and is el defined?[color=blue]
> }
> }[/color]

As an onChange event handler for a select element, I would suggest

function displayRadios( oSel){
var bClosed = oSel.options[oSel.selectedIn dex].value == "1";
document.getEle mentById("foo") .style.display =
bClosed ? "block" : none";
}

which allows changes to the closed status by the support agents. If you
don't want to allow them to reopen a case already closed on the DB you
need more code. AIUI the change to look up the "options" collection of
the SELECT element by selectedIndex reflects the standard way of
accessing a selected OPTION element.
[color=blue]
> </script>
>
> Then, in the body of the page, I call an ASP function which builds the list
> based on my query. Because this dropdown is showing something that already
> has a value in the DB (in other words, one can change the value by using
> this dropdown), I have code in there to mark the existing value (which is
> in
> the variable strStatusNum) as selected. First, the code on the page:[/color]
....[color=blue]
> <select name="StatusID" >[/color]

needs to have an event handler, say as
<select name="StatusID" onchange="displ ayRadios(this)" >[color=blue]
> <%[/color]
' generate some OPTION elements in vbscript...[color=blue]
> %>
> </select>
>
> <div id ="foo" style="display: none">[/color]

the display value here may need to be generated in vbscript according to
the current status on the DB - or at least determine what to do if the
case is already closed.
[color=blue]
> <input name="radioclos ed" type="radio" value="Resoluti on"
> onclick="BriefD esc.value=this. value" /> Resolution
> <input name="radioclos ed" type="radio" value="Final Analysis"
> onclick="BriefD esc.value=this. value" /> Final Analysis
> </div>
> </td>[/color]

again, if ops can display an existing closed case a checked attribute
may need to be placed on one of these radio buttons.
[color=blue]
> <td><span class="cellnumb er">*</span><span class="celltitl e">Brief
> Description:</span><br>
> <input name="BriefDesc " style="WIDTH: 600px; HEIGHT: 22px"
> maxlength=100>[/color]
again, this input may need a value attribute generated from current DB
values if a closed case (ticket) can be retrieved. If you prefer no
mispellings, you might like to generate the DB value on the server from
the value of the "radioclose d" radio group returned.[color=blue]
> </td>
>
> Finally, the code which actually builds the dropdown, and which is located
> in an include file:
>
> Private Function fillListBox(rec ordSet, selected)
>
> 'Loop through the recordset and add all the options to the list.
> Do Until recordSet.EOF
> Response.Write "<option onchange = displayRadios(t his) value=""" &[/color]

Ohhhh :)
The onchange event belongs on the SELECT element and is not defined for
an OPTION element. Checkout <URL http://www.w3.org/TR/DOM-Level-2-HTML >
for attribute values which *are* defined on OPTION elements.
[color=blue]
> recordSet.Field s(0).Value & """"
> 'If a list box needs to be selected, check to see if the current value
> in
> the recordset loop
> 'is the one that needs to be selected. If so, set it to be selected.
> If selected = recordSet.Field s(0).Value Then Response.Write " selected"[/color]

'This doesn't do anything special with already closed cases
[color=blue]
> Response.Write ">" & recordSet(1).Va lue & "</option>" & vbCrLf
> recordSet.MoveN ext
> Loop
> recordset.Close
> End Function
>
>[/color]

One other comment. The reason I tested equality of the .value attribute
of the OPTION element against "1", and not the .text attribute (value)
against "Closed" is that I have noted problems with IE ignoring setting
the .text value of an OPTION element. It appears to read .text
attributes okay, but I prefer to stay away from known bug areas when
possible.

HTH

cheers,
Dom

making div appear on dropdown selection

making div appear on dropdown selection

Comment