Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    358
    Thanks
    2
    Thanked 0 Times in 0 Posts

    3 layers dropdown list.

    dear,

    i'm using ASP try to generate a member registration form, let user enter their name, sex, address, country , state...

    what problem that i faced is, i want the "State" drop down list changed when user choose different "Country", and when "Postal Code" will Changed when user choose different "State".

    here is the HTML Code:
    <select name="select" size="1">
    <option selected>Choose Country</option>
    </select>
    </p>
    <p>
    <select name="select2">
    <option selected>Choose State based on your selected Country</option>
    </select>
    </p>
    <p>
    <select name="select3">
    <option selected>Choose Post Code based on your selected State</option>
    </select>
    Thanks.
    =====================================================
    From NinjaTurtle
    ++http://ohmygoh.blogspot.com|http://technology.ohmygoh.com++

  • #2
    New to the CF scene
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    3 layers dropdown list.

    Your best bet is to use form population with js. Try this, you'll need to tweak it to your requirements, shouldn't be too hard though.

    Cheers
    P


    <SCRIPT LANGUAGE="JavaScript">

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->
    <!-- Original: Andrew Berry (aberry@berrysystems.com) -->
    <!-- Web Site: http://www.berrysystems.com -->

    <!-- Begin
    var arrItems1 = new Array();
    var arrItemsGrp1 = new Array();

    arrItems1[3] = "Truck";
    arrItemsGrp1[3] = 1;
    arrItems1[4] = "Train";
    arrItemsGrp1[4] = 1;
    arrItems1[5] = "Car";
    arrItemsGrp1[5] = 1;

    arrItems1[6] = "Boat";
    arrItemsGrp1[6] = 2;
    arrItems1[7] = "Submarine";
    arrItemsGrp1[7] = 2;

    arrItems1[0] = "Planes";
    arrItemsGrp1[0] = 3;
    arrItems1[1] = "Ultralight";
    arrItemsGrp1[1] = 3;
    arrItems1[2] = "Glider";
    arrItemsGrp1[2] = 3;

    var arrItems2 = new Array();
    var arrItemsGrp2 = new Array();

    arrItems2[21] = "747";
    arrItemsGrp2[21] = 0
    arrItems2[22] = "Cessna";
    arrItemsGrp2[22] = 0

    arrItems2[31] = "Kolb Flyer";
    arrItemsGrp2[31] = 1
    arrItems2[34] = "Kitfox";
    arrItemsGrp2[34] = 1

    arrItems2[35] = "Schwietzer Glider";
    arrItemsGrp2[35] = 2

    arrItems2[99] = "Chevy Malibu";
    arrItemsGrp2[99] = 5
    arrItems2[100] = "Lincoln LS";
    arrItemsGrp2[100] = 5
    arrItems2[57] = "BMW Z3";
    arrItemsGrp2[57] = 5

    arrItems2[101] = "F-150";
    arrItemsGrp2[101] = 3
    arrItems2[102] = "Tahoe";
    arrItemsGrp2[102] = 3

    arrItems2[103] = "Freight Train";
    arrItemsGrp2[103] = 4
    arrItems2[104] = "Passenger Train";
    arrItemsGrp2[104] = 4

    arrItems2[105] = "Oil Tanker";
    arrItemsGrp2[105] = 6
    arrItems2[106] = "Fishing Boat";
    arrItemsGrp2[106] = 6

    arrItems2[200] = "Los Angelas Class";
    arrItemsGrp2[200] = 7
    arrItems2[201] = "Kilo Class";
    arrItemsGrp2[201] = 7
    arrItems2[203] = "Seawolf Class";
    arrItemsGrp2[203] = 7

    function selectChange(control, controlToPopulate, ItemArray, GroupArray)
    {
    var myEle ;
    var x ;
    // Empty the second drop down box of any choices
    for (var q=controlToPopulate.options.length;q>=0;q--) controlToPopulate.options[q]=null;
    if (control.name == "firstChoice") {
    // Empty the third drop down box of any choices
    for (var q=myChoices.thirdChoice.options.length;q>=0;q--) myChoices.thirdChoice.options[q] = null;
    }
    // ADD Default Choice - in case there are no values
    myEle = document.createElement("option") ;
    myEle.value = 0 ;
    myEle.text = "[SELECT]" ;
    controlToPopulate.add(myEle) ;
    // Now loop through the array of individual items
    // Any containing the same child id are added to
    // the second dropdown box
    for ( x = 0 ; x < ItemArray.length ; x++ )
    {
    if ( GroupArray[x] == control.value )
    {
    myEle = document.createElement("option") ;
    myEle.value = x ;
    myEle.text = ItemArray[x] ;
    controlToPopulate.add(myEle) ;
    }
    }
    }
    // End -->
    </script>

    </HEAD>

    <BODY>

    <form name=myChoices>
    <table align="center">
    <tr>
    <td>
    <SELECT id=firstChoice name=firstChoice onchange="selectChange(this, myChoices.secondChoice, arrItems1, arrItemsGrp1);">
    <option value=0 SELECTED>[SELECT]</option>
    <option value=1>Land</option>
    <option value=2>Sea</option>
    <option value=3>Air</option>
    </SELECT>
    </TD><TD>
    <SELECT id=secondChoice name=secondChoice onchange="selectChange(this, myChoices.thirdChoice, arrItems2, arrItemsGrp2);">
    </SELECT>
    <SELECT id=thirdChoice name=thirdChoice>
    </SELECT>
    </TD>
    </TR>
    </TABLE>
    </form>

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    358
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thanks

    that's what i want !!!! TQ....
    but now i try to use ASP to do that i meant the Select Options are not hard-coded, they are retrieved from SQL Server Database... if u know that pls give me ur solution, but i will try to post it to ASP section too.... tq.....
    Thanks.
    =====================================================
    From NinjaTurtle
    ++http://ohmygoh.blogspot.com|http://technology.ohmygoh.com++


  •  

    Posting Permissions

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