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

[pk]

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>

 

[Lee]

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
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>

The SCRIPT tag requires a "type" attribute:

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)">

 

[pk]

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>

 

[ASM]

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';
document.getElementById('MMDiv').style.visibility='visible';

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

}

</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>

 

[Randy Webb]

ASM said the following on 8/30/2005 8:47 PM:
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.

 

[pk]

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>

 

[pk]

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

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

 

[ASM]

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


if (myIndex==1)

== is comparison

yeap, I didn't fix it
but others did