SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Zealot amri's Avatar
    Join Date
    Dec 2002
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dynamic list/menu

    I have two list/menu in my form. Is there any way to make second list/menu option changes dynamically based on chosen option in first list/menu? Example: first menu has three option eg: A, B, C. If i select A then after selecting it 2nd list option will be : X, Y. But if i select B in 1st menu then 2nd menu option will be : V, W and so on. And it's all happens before submitting the form

    How to do that? Thanks

  2. #2
    SitePoint Addict xDev's Avatar
    Join Date
    Jul 2003
    Location
    Moncton, New Brunswick, Canada
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Yes this has been done many times before and you will find hundreds if not thousands of examples of it on the web. I made one myself in response to a question like yours. The guy wanted the radio buttons instead of 2 selects.

    PHP Code:
    <html>
    <
    head>
    <
    title>Dynamic Select Box
        Using Radio Button Events
    </title>
    <
    script type="text/javascript">
    team =
    [
        
    // first list
        
    [["Saku Koivu"39482304],
        [
    "Martin Rucinsky"34802389],
        [
    "Jeff Hackett"39823498],
        [
    "Sheldon Sourray"87587343],
        [
    "Richard Zednik"68798735],
        [
    "Brian Savage"98098509],
        [
    "Stephane Robidas"49490583],
        [
    "Patrice Brisebois"32898334],
        [
    "Oleg Petrov"92340934],
        [
    "Chad Kilger"34923409],
        [
    "Benoit Brunet"59384093],
        [
    "Jan Bulis"83948023],
        [
    "Patrick Traverse"41239812],
        [
    "Jose Theodore"98402398],
        [
    "Craig Darby"82393434],
        [
    "Patric Poulin"34290348],
        [
    "Karl Dykhuis"89092834]],
        
    // second list
        
    [["Mario Lemieux"23840238],
        [
    "Jaromir Jagr"92390484],
        [
    "Robert Lang"29048203],
        [
    "Alexei Kovalev"94098230],
        [
    "Jean-Sebastien Aubin"39234923],
        [
    "Kevin Stevens"29345423]],
        
    // third list
        
    [["Alexei Yashin"20394802],
        [
    "Daniel Alfredson"34982039],
        [
    "Marian Hossa"92348902],
        [
    "Patrick Lalime"98203894],
        [
    "Radek Bonk"98234902]]
    ];

    function 
    getData(flag)
    {
        var 
    0sel document.main.Teamlength;
        if(
    flag == 0)
        {
            
    length document.main.Team.length team[0].length;
            for(
    data in team[0])
            {
                
    sel.options[i] = new Option(team[0][data][0],
                
    team[0][data][1]);
                
    i++;
            }
            
    0;
        }
        if(
    flag == 1)
        {
            
    length document.main.Team.length team[1].length;
            for(
    data in team[1])
            {
                
    sel.options[i] = new Option(team[1][data][0],
                
    team[1][data][1]);
                
    i++;
            }
            
    0;
        }
        if(
    flag == 2)
        {
            
    length document.main.Team.length team[2].length;
            for(
    data in team[2])
            {
                
    sel.options[i] = new Option(team[2][data][0],
                
    team[2][data][1]);
                
    i++;
            }
            
    0;
        }
    }
    </script>
    </head>
    <body onload="getData(0);">
    <form name="main">
    <input type="radio" name="Make"
    onclick="getData(0)" checked="checked">Montreal Canadiens<br>
    <input type="radio" name="Make"
    onclick="getData(1)">Pittsburg Penguins<br>
    <input type="radio" name="Make"
    onclick="getData(2)">Ottawa Senators<br>
    <br>
    <select name="Team"
    onchange="document.getElementById('disp').innerHTML =
    'The value of this option is : '+this.value.bold();">
    </select>
    <p id="disp"></p>
    </form>
    </body>
    </html> 
    Your welcome to use it if you like. Its simple to use, you have 2 options name and value (in that order) in each list ... ["Martin Rucinsky", 34802389] . If you want the value to be a string instead of a number - as I have in the example - just make sure you have quotes around it:
    ["Martin Rucinsky", "this is the value!"]

    The display "The value of this option is" etc. is just there for a debugging tool. You can get rid of it by taking out the onchange attribute in the select.

    -xDev
    Last edited by xDev; Oct 26, 2003 at 15:25.

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ::: certified wild guess :::

  4. #4
    SitePoint Zealot amri's Avatar
    Join Date
    Dec 2002
    Posts
    133
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks......it works


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
  •