[Javascript] select

Andrew Gibson andyg at ihug.co.nz
Thu Mar 27 17:05:12 CST 2003


Just trying to give some ideas, not to give the solution......!

Amongst other things, I'm confused as to the suggestion of not using
.innerHTML. My understanding is that .innerHTML was designed mainly to aid
in the dynamic changing of text in elements throughout a page....and it's
compatible with the 2 big browsers....or does every solution on this have to
be compatible with every browser?

=======================================

Subject: Re: [Javascript] select
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
_______________________________________________
Javascript mailing list
Javascript at LaTech.edu
https://lists.LaTech.edu/mailman/listinfo/javascript




More information about the Javascript mailing list