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

Discussion in 'Javascript' started by pk, Aug 30, 2005.

  1. pk

    pk Guest

    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>
    pk, Aug 30, 2005
    #1
    1. Advertising

  2. pk

    Lee Guest

    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:

    <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)">
    Lee, Aug 30, 2005
    #2
    1. Advertising

  3. pk

    pk Guest

    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>
    pk, Aug 30, 2005
    #3
  4. pk

    ASM Guest

    Re: A select drop-down that appears/disappears according to previousselection.

    pk wrote:
    > 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>
    >



    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Aug 31, 2005
    #4
  5. pk

    Randy Webb Guest

    Re: A select drop-down that appears/disappears according to previousselection.

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


    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.


    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq & newsgroup weekly
    Randy Webb, Aug 31, 2005
    #5
  6. pk

    pk Guest

    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, Aug 31, 2005
    #6
  7. pk

    pk Guest

    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.
    pk, Aug 31, 2005
    #7
  8. pk

    ASM Guest

    Re: A select drop-down that appears/disappears according to previousselection.

    Randy Webb wrote:
    > ASM said the following on 8/30/2005 8:47 PM:
    >
    >>> if(myindex = 1) {

    >
    > if (myIndex==1)
    >
    > == is comparison


    yeap, I didn't fix it
    but others did

    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Aug 31, 2005
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Karl Seguin
    Replies:
    3
    Views:
    2,289
    John Morgan
    Feb 10, 2004
  2. SirPoonga
    Replies:
    2
    Views:
    753
    Ben Strackany
    Jan 7, 2005
  3. Daniel
    Replies:
    1
    Views:
    1,069
    Jukka K. Korpela
    Jul 12, 2007
  4. jaysch
    Replies:
    0
    Views:
    1,239
    jaysch
    Apr 30, 2011
  5. Replies:
    3
    Views:
    284
Loading...

Share This Page