SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making the contents of one 'select' menu dependent on another! ...How?

    I have one 'select' menu with certain options..

    Lets say Option 1, Option 2, Option 3, & Option 4 -->

    Code:
    <select name="options" id="options">
                      <option value="option1">Option 1</option>
                      <option value="option2">Option 2</option>
                      <option value="option3">Option 3</option>
                      <option value="option4">Option 4</option>
                    </select>
    I have another menu directly below it. When Option 1 is selected on the top menu, I want the second menu to display certain options, but when Option 2 is selected on the top menu I want there to be a different set of options in the second menu...

    I am not sure how I should go about doing this. I don't want the page to have to be refreshed.

    Could anyone shed any light on how i might do this?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay I got this script somewhere,

    Code:
    <html>
    <head>
    <title>select change 2nd select</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    var varieties=[
    ["varieties","granny smith","golden delicious","jonathan","braeburn"],
    ["varieties","anjou","bartlett","conference"],
    ["varieties","valencia","pineapple","pera"]
    ];
    
    function Box2(idx) {
    var f=document.myform;
    f.box2.options.length=null;
    for(var i=0; i<varieties[idx].length; i++) {
    	f.box2.options[i]=new Option(varieties[idx][i], i); 
        }    
    f.box2.size=f.box2.options.length;
    }
    
    window.onload=function() {
    Box2(0);
    document.myform.box1.onchange=function(){Box2(this.selectedIndex);};
    }
    </script>
    
    </head>
    <body>
    <form name="myform" method="post" action="http://www.mysite.com/mysite">
    <fieldset><legend>fruit</legend>
    <select name="box1" size="3">
        <option value="a">apple</option>
        <option value="b">pear</option>
        <option value="c">orange</option>
    </select>
    <select name="box2">
        
    </select>
    </fieldset>
    </form>
    </body>
    </html>
    and it works... But when it creates new options on the fly for the second menu it gives them numerical values.

    e.g.
    Code:
    <option value="0">Option 1</option>
    <option value="1">Option 2</option>
    <option value="2">Option 3</option>
    Is there a way of specifying the values instead of them being numerical?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    Non-Member
    Join Date
    Aug 2007
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    u may try this
    document.forms['testform'].testselect.options[i] = new Option('new text','new value');

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am a total n00b...

    Where would I put that temp304 ???
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •