A select drop-down that appears/disappears according to previous selection.

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

pk - 30 Aug 2005 22:17 GMT

Here is my code, and it's not working. Please help me get through
this. I've read every single tutorial and you may even see remnants of
some of their variables in my code. I don't know if I'm close, but I
feel that I'm getting there.

Thanks in advance for any help. I much appreciate it.

-pk

<SCRIPT>

function able(dropdown)
{
    var myindex = dropdown.selectedIndex
    if(myindex = 1) {
        MMDiv.style.visibility='visible';
        mainform.BalStep.focus();
    }
    else {
        MMDiv.style.visibility='hidden';
}

</SCRIPT>

<Form Name="myform">
<tr>
<td height="7" width="177">
<div align="right"><font color="#000000" face="Comic Sans MS">Boring
Type:</font></div>
</td>
<td height="7" width="397"><div align="left"><font color=#000000
face="Comic Sans MS">

<select name=Finish onchange='able(this.form.Finish);'>
            <option></option>
            <option>Rough</option>
            <option>Finish</option>
</select></font></div></td>

<DIV ID="MMDiv" style="visibility:hidden">
<LABEL FOR="BalStep">
<SELECT name=BalStepVal>
    <option></option>
    <option>Balanced Cutting</option>
    <option>Step Cutting</option>
</SELECT>
</DIV>
</FORM>
</tr>

Reply to this Message

Lee - 30 Aug 2005 22:38 GMT

pk said:

>Here is my code, and it's not working. Please help me get through
>this. I've read every single tutorial and you may even see remnants of
[quoted text clipped - 4 lines]
>
>-pk

><SCRIPT>

The SCRIPT tag requires a "type" attribute:

<script type="text/javascript">

>function able(dropdown)
>{
> var myindex = dropdown.selectedIndex
> if(myindex = 1) {

The "=" sign is the assignment operator, not the comparison
operator. You want:
if (myindex == 1) {

> MMDiv.style.visibility='visible';

Don't refer to a page element by its ID value as if it were global.
It is in some browsers, but it's non-standard and poor practice.

document.getElementById("MMDiv").style.visibility="visible";

> mainform.BalStep.focus();

The same goes for forms, although they can be referred to as
attributes of the document, as in:

document.mainform.BalStep.focus();

><select name=Finish onchange='able(this.form.Finish);'>

The value of the name attribut should be in quotes.
The keyword "this" is already a reference to "Finish":

<select name="Finish" onchange="able(this)">

Reply to this Message

pk - 30 Aug 2005 23:10 GMT

Hmm, I wasn't very close at all. I'm still not getting it. My code
appears as follows now. There is still no observable behavior. :(

<SCRIPT type="text/javascript"> >

function able(dropdown)
{
var myindex = dropdown.selectedIndex
    if(myindex == 1) {

document.getElementById("MMDiv").style.visibility="visible";
        document.mainform.BalStep.focus();
    }
    else
{
        document.getElementById("MMDiv").style.visibility='hidden';
}

</SCRIPT>

<Form Name="myform">
<tr>
<td height="7" width="177">
<div align="right"><font color="#000000" face="Comic Sans MS">Boring
Type:</font></div>
</td>
<td height="7" width="397"><div align="left"><font color=#000000
face="Comic Sans MS">

<select name="Finish" onchange='able(this);'>
        <option></option>
        <option>Rough</option>
        <option>Finish</option>
    </select></font></div></td>

    <DIV ID="MMDiv" style="visibility:hidden">
    <LABEL FOR="BalStep">
    <SELECT name=BalStepVal>
        <option></option>
        <option>Balanced Cutting</option>
        <option>Step Cutting</option>
    </SELECT>
    </DIV>
    </FORM>
    </tr>

Reply to this Message

ASM - 31 Aug 2005 01:47 GMT

> Here is my code, and it's not working. Please help me get through
> this. I've read every single tutorial and you may even see remnants of
[quoted text clipped - 12 lines]
> if(myindex = 1) {
> MMDiv.style.visibility='visible';

document.getElementById('MMDiv').style.visibility='visible';

>         mainform.BalStep.focus();
>     }
>     else {
>         MMDiv.style.visibility='hidden';

document.getElementById('MMDiv').style.visibility='';

> }
>
[quoted text clipped - 25 lines]
> </FORM>
> </tr>

Signature

Stephane Moriaux et son [moins] vieux Mac

Reply to this Message

Randy Webb - 31 Aug 2005 06:43 GMT

ASM said the following on 8/30/2005 8:47 PM:

>> Here is my code, and it's not working. Please help me get through
>> this. I've read every single tutorial and you may even see remnants of
[quoted text clipped - 11 lines]
>> var myindex = dropdown.selectedIndex
>> if(myindex = 1) {

if (myIndex==1)

== is comparison
= is setting the variable.

Since it can set the var myindex to 1, it will always evaluate as true
so you never get to the else branch.

Signature

Randy
comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly

Reply to this Message

pk - 31 Aug 2005 16:00 GMT

OK, when I initially posted this, I didn't think I was all that close
to having it work. Now I swear it should be working, but it's not.
I'm posting some simplified code with comments of my thought process
(SCARY!). Tell me where I went wrong please. :) (These comments don't
truly exist in my code, I added them for insight. They're commented
Java-style since I don't write in HTML or JavaScript.)

Thanks for helping. I realize this is frustrating and you probably
just want to tell me to go read a JavaScript book.

<html>
<SCRIPT type="text/javascript"> >

function able(dropdown)

{
    var myindex =
document.myform.dropdown.options[document.myform.dropdown.selectedIndex].value
    // the line above put the value of my dropdown menu selection in the
variable myindex. this value will be 0, 1, or 2.
if(myindex == 1) {
        document.getElementById('BalStepDiv').style.visibility="visible";
        document.myform.BalStepVal.focus();
// in the case that myindex is equal to 1, i would like
to set the BalStepDiv <div> to visible.
    }
    else {
        document.getElementById('BalStepDiv').style.visibility="hidden";
// in the case that myindex is not equal to 1, i would
like to set the BalStepDiv <div> to hidden.
}

</SCRIPT>

<body>
<Form Name="myform">
Test Select:
<select name="Finish" onchange='able(this);'>
    <option></option> //selectedIndex == 0
    <option>Rough</option> //selectedIndex == 1
    <option>Finish</option> //selectedIndex == 2
</select>

<div id=BalStepDiv style="visibility:hidden;">
// the line above sets everything between the <div> </div> tags to
hidden, until that is changed by the function above.
<select name=BalStepVal>
    <option></option>
    <option>Balanced Cutting</option>
    <option>Step Cutting</option>
</select>
</div>
</form>
</body>
</html>

Reply to this Message

pk - 31 Aug 2005 17:21 GMT

BINGO! I understand how this works now.
Instead of var myindex document.myform.dropdown.options[document.myform.dropdown.selectedIndex].value
;
i changed it to
var myindex = document.myform.Finish.selectedIndex;

I finally see how the naming convention works. Thanks for your help.

Reply to this Message

ASM - 31 Aug 2005 18:20 GMT

> ASM said the following on 8/30/2005 8:47 PM:
>
[quoted text clipped - 3 lines]
>
> == is comparison

yeap, I didn't fix it
but others did

Signature

Stephane Moriaux et son [moins] vieux Mac

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / JavaScript / August 2005

A select drop-down that appears/disappears according to previous selection.