dynamic drop down menu (part 2)...

Discussion in 'HTML' started by firstcustomer@gmail.com, Feb 21, 2006.

  1. Guest

    Further to my earlier post, I've found something that does partly what
    I'm doing, but there are two issues:

    1) There is an error in the script. Being a Javascript newbie, I've no
    idea what the problem is.

    2) I don't know how to re-program the script so that it opens up a url
    depending on the choices made.

    Here is the code (thanks Google!), I'd appreciate any help the you can
    give.



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <HTML>
    <HEAD>
    <TITLE>Dynamic Dropdown Boxes</TITLE>
    <META NAME="Generator" CONTENT="TextPad 3.0">
    <META NAME="Author" CONTENT="Heidi Housten">
    </HEAD>


    <style>
    body,table,td {font-family:verdana; font-size:9pt}
    select {width:130;font-family:verdana}
    pre { font-size:9pt }
    </style>





    <script language=javascript>
    <!--
    mainOpt = new Array()
    subOpt = new Array()
    mainOpt[0] = "How to relax"
    subOpt [0] = new Array("","","")
    mainOpt[1] = "Hot Spots"
    subOpt [1] = new Array("Pick a Hot Spot","Mojave","Mars","Death
    Valley","Mt. St. Helens")
    mainOpt[2] = "Festivals"
    subOpt [2] = new Array("Which One?","Mardi Gras","Cinco de
    Mayo","Midsummer","Kite Festival")
    mainOpt[3] = "Good Books"
    subOpt [3] = new Array("Which Book?","N is for Noose","Four to
    Score","A Grave Talent","Six of One")
    mainOpt[4] = "Holidays"
    subOpt [4] = new Array("Choose
    Holiday","Cruises","Safaris","Ballooning","Adventures")
    function init()
    {

    fillCombo(document.forms.myMenus.mainMenu,mainOpt)
    fillCombo(document.forms.myMenus.mainBox,mainOpt)
    }

    function fillCombo(cmbBox,aryMenu)
    {
    cmbBox.length = 0 // Clear out the current options
    for (menuOpt in aryMenu)
    {
    cmbBox.options[cmbBox.length] = new
    Option(aryMenu[menuOpt],cmbBox.length)
    }
    //Show first item if it is a drop down
    cmbBox.selectedIndex=0
    }
    //-->
    </script>

    <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" onload="init()">
    <center>
    <form name=myMenus>
    <br>an example<br><br>
    <!-- do select template for older browsers, some
    can't change size dynamically -->
    <select name=mainMenu
    onchange="fillCombo(subMenu,subOpt[this.selectedIndex])">
    <option>
    <option>
    <option>
    <option>
    <option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </select><br><br>
    <select name=subMenu>
    <option>
    <option>
    <option>
    <option>
    <option>
    <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </select>
    <br>
    </form>
    </center>
    </BODY>
    </HTML>
    , Feb 21, 2006
    #1
    1. Advertising

  2. wrote:

    > Here is the code (thanks Google!), I'd appreciate any help the you can
    > give.


    I don't do JavaScript, but while we're here...

    > <style>
    > body,table,td {font-family:verdana; font-size:9pt}
    > select {width:130;font-family:verdana}
    > pre { font-size:9pt }
    > </style>


    9pt? Points are for printing. Many people won't be able to read that,
    and may not be able to resize it in some browsers. Set your font-size to
    100%.

    http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html
    http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

    --
    -bts
    -Warning: I brake for lawn deer
    Beauregard T. Shagnasty, Feb 21, 2006
    #2
    1. Advertising

  3. wrote:
    > Further to my earlier post, I've found something that does partly what
    > I'm doing, but there are two issues:



    The reason you did not get a satifactory response is that most feel that
    what your are attempting is a 'bad idea'. But in the matter of
    JavaScript (which must be enabled for the form to work, the other bad
    idea) you have some obvious errors which I will show to you, educational
    and all.
    >
    > 1) There is an error in the script. Being a Javascript newbie, I've no
    > idea what the problem is.
    >
    > 2) I don't know how to re-program the script so that it opens up a url
    > depending on the choices made.
    >
    > Here is the code (thanks Google!), I'd appreciate any help the you can
    > give.
    >
    >
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">


    Ugh, please look up doctype. This is ancient.
    > <HTML>
    > <HEAD>
    > <TITLE>Dynamic Dropdown Boxes</TITLE>
    > <META NAME="Generator" CONTENT="TextPad 3.0">
    > <META NAME="Author" CONTENT="Heidi Housten">
    > </HEAD>
    >
    >
    > <style>
    > body,table,td {font-family:verdana; font-size:9pt}
    > select {width:130;font-family:verdana}
    > pre { font-size:9pt }
    > </style>
    >
    >
    >
    >


    Next although ending JavaScript statements with a ';' is optional I
    recommend it because is prevents errors when a single statement spans
    more than on line. Also your can gang more than one statement on a
    single line:
    var aOpt=new Array; var oMine=new Object;

    >
    > <script language=javascript>
    > <!--
    > mainOpt = new Array()
    > subOpt = new Array()
    > mainOpt[0] = "How to relax"
    > subOpt [0] = new Array("","","")
    > mainOpt[1] = "Hot Spots"
    > subOpt [1] = new Array("Pick a Hot Spot","Mojave","Mars","Death
    > Valley","Mt. St. Helens")
    > mainOpt[2] = "Festivals"
    > subOpt [2] = new Array("Which One?","Mardi Gras","Cinco de
    > Mayo","Midsummer","Kite Festival")
    > mainOpt[3] = "Good Books"
    > subOpt [3] = new Array("Which Book?","N is for Noose","Four to
    > Score","A Grave Talent","Six of One")
    > mainOpt[4] = "Holidays"
    > subOpt [4] = new Array("Choose
    > Holiday","Cruises","Safaris","Ballooning","Adventures")
    > function init()
    > {
    >
    > fillCombo(document.forms.myMenus.mainMenu,mainOpt)
    > fillCombo(document.forms.myMenus.mainBox,mainOpt)

    Incorrect here-------------------------^^------^^^
    should be:

    fillCombo(document.forms.myMenus.subMenu,subOpt[0]);

    to fill the second SELECT "subMenu" with the 1st array "subOpt[0]" upon
    initialization.


    > }
    >
    > function fillCombo(cmbBox,aryMenu)
    > {
    > cmbBox.length = 0 // Clear out the current options
    > for (menuOpt in aryMenu)
    > {
    > cmbBox.options[cmbBox.length] = new
    > Option(aryMenu[menuOpt],cmbBox.length)
    > }
    > //Show first item if it is a drop down
    > cmbBox.selectedIndex=0
    > }
    > //-->
    > </script>
    >
    > <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" onload="init()">
    > <center>
    > <form name=myMenus>
    > <br>an example<br><br>
    > <!-- do select template for older browsers, some
    > can't change size dynamically -->
    > <select name=mainMenu
    > onchange="fillCombo(subMenu,subOpt[this.selectedIndex])">

    -------------------------^^^
    should pass the complete reference to the SELECT object:

    onchange="fillCombo(this.form.subMenu, subOpt[this.selectedIndex]);



    > <option>
    > <option>
    > <option>
    > <option>
    > <option>
    > <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    > </select><br><br>
    > <select name=subMenu>
    > <option>
    > <option>
    > <option>
    > <option>
    > <option>
    > <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    > </select>
    > <br>
    > </form>
    > </center>
    > </BODY>
    > </HTML>
    >


    Probably more but that is what I found on quick examination.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 21, 2006
    #3
  4. Neil Monk Guest

    "Beauregard T. Shagnasty" <> wrote in message
    news:ReFKf.47721$...
    > wrote:
    >
    >> Here is the code (thanks Google!), I'd appreciate any help the you can
    >> give.

    >
    > I don't do JavaScript, but while we're here...
    >
    >> <style>
    >> body,table,td {font-family:verdana; font-size:9pt}
    >> select {width:130;font-family:verdana}
    >> pre { font-size:9pt }
    >> </style>

    >
    > 9pt? Points are for printing. Many people won't be able to read that,
    > and may not be able to resize it in some browsers. Set your font-size to
    > 100%.
    >
    > http://www.xs4all.nl/~sbpoley/webmatters/fontsize.html
    > http://www.xs4all.nl/~sbpoley/webmatters/verdana.html

    <snip>

    Thanks for your comments. Again, this is not relevent to my project. If this
    was for a "proper" website (as in to go on the WWW, and be used
    cross-browser, then yes, I'd agree).

    Thanks for your comments.
    --
    Neil
    Neil Monk, Feb 21, 2006
    #4
  5. Neil Monk Guest

    "Jonathan N. Little" <> wrote in message
    news:43fb3119$0$25075$...
    > wrote:
    >> Further to my earlier post, I've found something that does partly what
    >> I'm doing, but there are two issues:

    >
    >
    > The reason you did not get a satifactory response is that most feel that
    > what your are attempting is a 'bad idea'. But in the matter of JavaScript
    > (which must be enabled for the form to work, the other bad idea) you have
    > some obvious errors which I will show to you, educational and all.
    >>
    >> 1) There is an error in the script. Being a Javascript newbie, I've no
    >> idea what the problem is.
    >>
    >> 2) I don't know how to re-program the script so that it opens up a url
    >> depending on the choices made.
    >>
    >> Here is the code (thanks Google!), I'd appreciate any help the you can
    >> give.
    >>
    >>
    >>
    >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

    >
    > Ugh, please look up doctype. This is ancient.
    >> <HTML>
    >> <HEAD>
    >> <TITLE>Dynamic Dropdown Boxes</TITLE>
    >> <META NAME="Generator" CONTENT="TextPad 3.0">
    >> <META NAME="Author" CONTENT="Heidi Housten">
    >> </HEAD>
    >>
    >>
    >> <style>
    >> body,table,td {font-family:verdana; font-size:9pt}
    >> select {width:130;font-family:verdana}
    >> pre { font-size:9pt }
    >> </style>
    >>
    >>
    >>
    >>

    >
    > Next although ending JavaScript statements with a ';' is optional I
    > recommend it because is prevents errors when a single statement spans more
    > than on line. Also your can gang more than one statement on a single line:
    > var aOpt=new Array; var oMine=new Object;
    >
    >>
    >> <script language=javascript>
    >> <!--
    >> mainOpt = new Array()
    >> subOpt = new Array()
    >> mainOpt[0] = "How to relax"
    >> subOpt [0] = new Array("","","")
    >> mainOpt[1] = "Hot Spots"
    >> subOpt [1] = new Array("Pick a Hot Spot","Mojave","Mars","Death
    >> Valley","Mt. St. Helens")
    >> mainOpt[2] = "Festivals"
    >> subOpt [2] = new Array("Which One?","Mardi Gras","Cinco de
    >> Mayo","Midsummer","Kite Festival")
    >> mainOpt[3] = "Good Books"
    >> subOpt [3] = new Array("Which Book?","N is for Noose","Four to
    >> Score","A Grave Talent","Six of One")
    >> mainOpt[4] = "Holidays"
    >> subOpt [4] = new Array("Choose
    >> Holiday","Cruises","Safaris","Ballooning","Adventures")
    >> function init()
    >> {
    >>
    >> fillCombo(document.forms.myMenus.mainMenu,mainOpt)
    >> fillCombo(document.forms.myMenus.mainBox,mainOpt)

    > Incorrect here-------------------------^^------^^^
    > should be:
    >
    > fillCombo(document.forms.myMenus.subMenu,subOpt[0]);
    >
    > to fill the second SELECT "subMenu" with the 1st array "subOpt[0]" upon
    > initialization.
    >
    >
    >> }
    >>
    >> function fillCombo(cmbBox,aryMenu)
    >> {
    >> cmbBox.length = 0 // Clear out the current options
    >> for (menuOpt in aryMenu)
    >> {
    >> cmbBox.options[cmbBox.length] = new
    >> Option(aryMenu[menuOpt],cmbBox.length)
    >> }
    >> //Show first item if it is a drop down
    >> cmbBox.selectedIndex=0
    >> }
    >> //-->
    >> </script>
    >>
    >> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" onload="init()">
    >> <center>
    >> <form name=myMenus>
    >> <br>an example<br><br>
    >> <!-- do select template for older browsers, some
    >> can't change size dynamically -->
    >> <select name=mainMenu
    >> onchange="fillCombo(subMenu,subOpt[this.selectedIndex])">

    > -------------------------^^^
    > should pass the complete reference to the SELECT object:
    >
    > onchange="fillCombo(this.form.subMenu, subOpt[this.selectedIndex]);
    >
    >
    >
    >> <option>
    >> <option>
    >> <option>
    >> <option>
    >> <option>
    >> <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    >> </select><br><br>
    >> <select name=subMenu>
    >> <option>
    >> <option>
    >> <option>
    >> <option>
    >> <option>
    >> <option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    >> </select>
    >> <br>
    >> </form>
    >> </center>
    >> </BODY>
    >> </HTML>
    >>

    >
    > Probably more but that is what I found on quick examination.
    >

    <snip>
    Cheers Jonathan, I'll take a look when I get back in the office.
    --
    Neil
    Neil Monk, Feb 21, 2006
    #5
  6. Neil Monk wrote:

    > Thanks for your comments. Again, this is not relevent to my project.
    > If this was for a "proper" website (as in to go on the WWW, and be
    > used cross-browser, then yes, I'd agree).


    I did not notice in your original post where you said this was not a WWW
    page. We normally assume WWW unless you state otherwise, such as "this
    is for an intranet" and maybe even "all my users are slaves to IE." Or
    similar.

    > Thanks for your comments.


    Hopefully, every user of your intranet has perfect vision? :)

    --
    -bts
    -Warning: I brake for lawn deer
    Beauregard T. Shagnasty, Feb 21, 2006
    #6
  7. Neil Monk Guest

    Beauregard T. Shagnasty wrote:
    > Neil Monk wrote:
    >
    >> Thanks for your comments. Again, this is not relevent to my project.
    >> If this was for a "proper" website (as in to go on the WWW, and be
    >> used cross-browser, then yes, I'd agree).

    >
    > I did not notice in your original post where you said this was not a
    > WWW page. We normally assume WWW unless you state otherwise, such as
    > "this is for an intranet" and maybe even "all my users are slaves to
    > IE." Or similar.
    >


    Unfortunatley they are all slaves to IE, only I have FF installed.

    >> Thanks for your comments.

    >
    > Hopefully, every user of your intranet has perfect vision? :)



    That is correct, well, not all of the hundreds of thousands of people in my
    company, but the 10-15 people that would be using this, yes they have..
    --
    Neil
    Neil Monk, Feb 21, 2006
    #7
  8. Guest

    Cheers Jonathan.

    How do I get it to go to a url now? Can you help me with that too
    please?

    TIA, Neil.
    , Feb 22, 2006
    #8
  9. wrote:

    > Cheers Jonathan.
    >
    > How do I get it to go to a url now? Can you help me with that too
    > please?
    >
    > TIA, Neil.
    >

    Please quote what you are referring to.

    To do that you will need a third synchronized array of URLs for your
    subOpt array where upon what is selected with subMenu you could set the
    document's location to that URL.

    Google 'javascript location object'

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 22, 2006
    #9
  10. Guest

    Jonathan N. Little wrote:
    > wrote:
    >
    > > Cheers Jonathan.
    > >
    > > How do I get it to go to a url now? Can you help me with that too
    > > please?
    > >
    > > TIA, Neil.
    > >

    > Please quote what you are referring to.
    >
    > To do that you will need a third synchronized array of URLs for your
    > subOpt array where upon what is selected with subMenu you could set the
    > document's location to that URL.
    >
    > Google 'javascript location object'
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com



    Sorry, I was using the wrong option (I use USENET via Google Groyups
    when I'm at work).

    I'll have a look at what you've said.
    --
    Cheers, Neil
    , Feb 23, 2006
    #10
  11. wrote:

    > Jonathan N. Little wrote:

    <snip>
    >>Please quote what you are referring to.

    <snip>
    > Sorry, I was using the wrong option (I use USENET via Google Groyups
    > when I'm at work).


    I don't use GG but I know from all the complaints that there is a
    setting to do proper quoting. I think Blinky has a reference to it on
    his site:

    http://blinkynet.net/comp/uip5.html
    The Usenet Improvement Project - Blinkynet

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 23, 2006
    #11
  12. Guest

    Jonathan N. Little wrote:
    > wrote:
    >
    > > Jonathan N. Little wrote:

    > <snip>
    > >>Please quote what you are referring to.

    > <snip>
    > > Sorry, I was using the wrong option (I use USENET via Google Groyups
    > > when I'm at work).

    >
    > I don't use GG but I know from all the complaints that there is a
    > setting to do proper quoting. I think Blinky has a reference to it on
    > his site:
    >
    > http://blinkynet.net/comp/uip5.html
    > The Usenet Improvement Project - Blinkynet
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com


    There is indeed. I've found it now!

    Still not got it (my form) work, I know next to nothing about
    Javascript hence my problems. I've googled like you suggested, but I
    can't find an example of what I need.
    --
    Neil
    , Feb 23, 2006
    #12
  13. wrote:
    <snip>
    >
    > Still not got it (my form) work, I know next to nothing about
    > Javascript hence my problems. I've googled like you suggested, but I
    > can't find an example of what I need.


    Aw c'mon Neil! The first results page in Google for the three search
    words 'javascript location object' all yielded valid pages on how to use
    the location object. You have do a little work for yourself ;-)

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 23, 2006
    #13
  14. Guest

    Jonathan N. Little wrote:
    > wrote:
    > <snip>
    > >
    > > Still not got it (my form) work, I know next to nothing about
    > > Javascript hence my problems. I've googled like you suggested, but I
    > > can't find an example of what I need.

    >
    > Aw c'mon Neil! The first results page in Google for the three search
    > words 'javascript location object' all yielded valid pages on how to use
    > the location object. You have do a little work for yourself ;-)
    >

    The only problem Jonathan, is that I know next to nothing about
    Javascript, so the pages that I found mean nothing to me...
    --
    Neil
    , Feb 24, 2006
    #14
  15. wrote:
    > Jonathan N. Little wrote:
    >
    >> wrote:
    >><snip>
    >>
    >>>Still not got it (my form) work, I know next to nothing about
    >>>Javascript hence my problems. I've googled like you suggested, but I
    >>>can't find an example of what I need.

    >>
    >>Aw c'mon Neil! The first results page in Google for the three search
    >>words 'javascript location object' all yielded valid pages on how to use
    >>the location object. You have do a little work for yourself ;-)
    >>

    >
    > The only problem Jonathan, is that I know next to nothing about
    > Javascript, so the pages that I found mean nothing to me...


    http://www.google.com/search?hl=en&q=javascript tutorial&btnG=Google Search

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 24, 2006
    #15
  16. Jim Higson Guest

    Jonathan N. Little wrote:

    > wrote:
    >> Jonathan N. Little wrote:
    >>
    >>> wrote:
    >>><snip>
    >>>
    >>>>Still not got it (my form) work, I know next to nothing about
    >>>>Javascript hence my problems. I've googled like you suggested, but I
    >>>>can't find an example of what I need.
    >>>
    >>>Aw c'mon Neil! The first results page in Google for the three search
    >>>words 'javascript location object' all yielded valid pages on how to use
    >>>the location object. You have do a little work for yourself ;-)
    >>>

    >>
    >> The only problem Jonathan, is that I know next to nothing about
    >> Javascript, so the pages that I found mean nothing to me...

    >
    >

    http://www.google.com/search?hl=en&q=javascript tutorial&btnG=Google Search
    >


    Or, even:

    javascript:location.replace("http://www.google.com/search?q=javascript+tutorial")

    If you are using a Javascript-enabled browser to read this, and the portal
    you're reading on linkifies all URLs (not just the http ones), clicking
    that *may* just work.

    If not, well, that shows the problems with using javascript for core
    functionality.

    --
    Jim
    Jim Higson, Feb 26, 2006
    #16
  17. Jim Higson wrote:

    > Jonathan N. Little wrote:
    >
    >
    >> wrote:
    >>
    >>>Jonathan N. Little wrote:
    >>>
    >>>
    >>>> wrote:
    >>>><snip>
    >>>>
    >>>>>Still not got it (my form) work, I know next to nothing about
    >>>>>Javascript hence my problems. I've googled like you suggested, but I
    >>>>>can't find an example of what I need.
    >>>>
    >>>>Aw c'mon Neil! The first results page in Google for the three search
    >>>>words 'javascript location object' all yielded valid pages on how to use
    >>>>the location object. You have do a little work for yourself ;-)
    >>>>
    >>>
    >>>The only problem Jonathan, is that I know next to nothing about
    >>>Javascript, so the pages that I found mean nothing to me...

    >>
    >>

    > http://www.google.com/search?hl=en&q=javascript tutorial&btnG=Google Search
    >
    >
    > Or, even:
    >
    > javascript:location.replace("http://www.google.com/search?q=javascript+tutorial")
    >
    > If you are using a Javascript-enabled browser to read this, and the portal
    > you're reading on linkifies all URLs (not just the http ones), clicking
    > that *may* just work.
    >
    > If not, well, that shows the problems with using javascript for core
    > functionality.
    >


    I (and others) have warned the OP of the problem of his reliance on
    JavaScript in his design however he is committed to this strategy. I
    have answered his questions with the footnote that although it is
    possible to do with JavaScript, server-side is a far better solution.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 26, 2006
    #17
    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. SirPoonga
    Replies:
    2
    Views:
    735
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    994
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    449
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    245
  5. Replies:
    3
    Views:
    270
Loading...

Share This Page