[Javascript] select

David T. Lovering dlovering at gazos.com
Thu Mar 27 16:26:19 CST 2003


Hmmm... a couple of issues here...

Firstly, the "Select" entry in your options will also appear as a 'pet'.  I
don't know what a 'Select' eats, or how to care for one myself.  You might
want to take it out and put it as a label next to the select, or else embed
a 'disable' flag in the options directive next to it.

Next, an innerHTML include of 'curPet' doesn't mean much to me, and I suspect
most of the browsers in the world would be similarly confused.  Rather than
use the innerHTML directive, simply label each of your 'pet' objects with an
"id=xxxxx" declaration, where xxxxx is replaced by the name of the pet.  Then
when you do your getElementById("cat"), it returns a pointer directly to the
cat object.  

Next, you use a '.value' declaration in your options reference, yet since the
value and the text attributes are the same in all cases, you might as well
just use the default (.text), and stick with it.  This will simply both the code
and the assignment issues later.

I'm again not sure what changing the inner HTML def for a TD actually does, 
although I'm guessing that it tries to stick the string '*' + curPet between
the respective tags.  I'd think you'd be better off using 

<input type='text' name='cat' size=1 readonly style='border=0; borderstyle=none'>

and just write the value (* or ' ') into it, rather than trying to stuff a <TD></TD>
and hope that your browser won't do funky things with it.  My argument is not
that <TD></TD> can't handle text (it is generally intended to do so and will
work fine), but that it is typically static and drawn only at the onLoad event.
Inputs are event-driven, and can be changed on the fly with less bother and
greater portability between Netscape/IE/Opera/Galeon, etc.  If you REALLY want to
nuke/rebuild a TD, use the deleteElement and createElement commands to do it
according to Hoyle.  Trust me, changing a text field inside a <input> text object
is trivial by comparison.

Finally I don't see the code which nukes the previous asterisk out of the last selection
(however you choose to signify it).

-- Dave Lovering

Andrew Gibson wrote:
> 
> The effect I want to achieve is, when selecting cat, an asterisk is placed
> in the cell next to cat in the table.  When dog is selected, the asterisk is
> removed from cat row and an asterick is placed in the dog row.  Kelly
> ===========================================================
> 
> Would this work?
> <form>
> <select onChange=test(this.form) size="1" name="pet" >
>    <option value="Select">Select</option>
>   <option value="Dog">Dog</option>
>   <option value="Cat">Cat</option>
>   </select>
> </form>
> <table>
> <tr><td id=Dog>Dog</td></tr>
> <tr><td id=Cat>Cat</td></tr>
> </table>
> 
> <script>
> var curPet="";
> function test(frm)
> {
> if(curPet!=""){
> document.getElementById(curPet).innerHTML=curPet;
> }
> 
>  var pet=frm.pet.options[frm.pet.selectedIndex].value
>  document.getElementById(pet).innerHTML="*"+pet
>  curPet=pet
> }
> </script>
> 
> Cheers
> Andrew Gibson
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript


More information about the Javascript mailing list