SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jan 2005
    Location
    NL
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    dynamic dropdown box

    I was wondering about how to make a dropdown box which fills another dropdownbox when a user selects an option from it. I found the following code which works, but I want to add url's to the second dropdown box.
    Example: user selects Fruit from box 1, box 2 appears with Fruit-values. And when the user selects Apple from box 2 it opens www.apple.com in frame1 and www.apple.nl in frame2.
    What should I change in the code? Or is there maybe a better script for this?

    Here's the code:

    Code:
    <html> 
    <head> 
    <script language="javascript"> 
    function setOptions(o) 
    { 
    var select2 = document.form1.select2; 
    select2.options.length = 0; 
    if (o == "1") 
    { 
    select2.options[select2.options.length] = new Option('Apple'); 
    select2.options[select2.options.length] = new Option('Pear'); 
    } 
    if (o == "2") 
    { 
    select2.options[select2.options.length] = new Option('Carrot'); 
    select2.options[select2.options.length] = new Option('Potatoe'); 
    } 
    if (o == "3") 
    { 
    select2.options[select2.options.length] = new Option('Chicken'); 
    select2.options[select2.options.length] = new Option('Fish'); 
    } 
    } 
    </script> 
    </head> 
    <body> 
    <form name="form1"> 
    <select name="select1" size="1" onchange="setOptions(document.form1.select1.options
    [document.form1.select1.selectedIndex].value);"> 
    <option value="1">Fruit</option> 
    <option value="2">Vegetable</option> 
    <option value="3">Meat</option> 
    </select> 
    <br /> 
    <br /> 
    <select name="select2" size="1"> 
    <option>Apple</option> 
    <option>Pear</option> 
    </select> 
    </form> 
    </body> 
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    style>
    .
    mcTxtBox font-Size:12pxwidth:100px; }
    .
    mcTxtBoxDis font-Size:12pxwidth:100px;background-Color:#66FFFF;border:0px; }
    </style>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    // Customise
    // each field is a sub array
    // first field of the sub array is the text
    // second field of the sub array is the value which could be urls

    var mcyear30Ary=new Array(
    [
    'Entry 1A','4.77'],
    [
    'Entry 1B','5.07'],
    [
    'Entry 1C','5.37'],
    [
    'Entry 1D','5.68'])

    var 
    mcyear15Ary=new Array(
    [
    'Entry 2A','4.77'],
    [
    'Entry 2B','5.07'],
    [
    'Entry 2C','5.37'],
    [
    'Entry 2D','5.68'])


    // No Need to Change


    function mcInterestRate(mc){
     if (!
    mc){ return; }
     
    mcUseAry=eval('mcyear'+mc+'Ary');
     
    document.getElementById('mcMPayRate').options[1]=new Option('for '+mc+' years','',true,true);
     for (
    mc0=0;mc0<mcUseAry.length;mc0++){
      
    document.getElementById('mcMPayRate').options[mc0+2]=new Option(mcUseAry[mc0][0],mcUseAry[mc0][1],true,true);
     }
     
    document.getElementById('mcMPayRate').size=mcUseAry.length+2;
     
    document.getElementById('mcMPayRate').selectedIndex=0;
    }



    //-->
    </script>

    </head>

    <body bgcolor="#CCFFFF" >
    <br>
    <center>
    <div id="mcMorgageCalculator" >
    <table width="420" cellpadding="0" cellspacing="0" border="1" bgcolor="#66FFFF" style="font-size:12px;" >
      <tr height="45" >
        <td align="center" >
         Select the mortage duration and interest rate.<br>
         <select id="mcMPayYear" class="mcTxtBox" style="width:120px;" size="1" onchange="javascript:mcInterestRate(this.options[this.selectedIndex].value);" >
         <option value="">Mortgage Duration</option>
         <option value="30">30 Years</option>
         <option value="15">15 Years</option>
         </select>
        </td>
        <td >
         <div style="position:relative;left:0px;width:130px;background-Color:red;" >
          <select id="mcMPayRate" class="mcTxtBox" style="position:absolute;top:-2px;left:10px;width:105px;" size="1" onchange="javascript:this.size=1;">
          <option value="">Interest Rate</option>
          </select>
         </div>
        </td>
      </tr>
    </table>





    <br>
    <br>
    <br>
    <br>

    <br>
    <br>


    </center>
    <br>

    </div>

    </body>

    </html> 

  3. #3
    SitePoint Member
    Join Date
    Jan 2005
    Location
    NL
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that's exactly what I'm looking for but.... How can I make it work for multiple urls and multiple frames?
    what I want is that when I select eg "2003" in combobox 1, it loads "week 1" and "week 2" as options in combobox 2. When the user selects "week 1" it should open week1a.htm in frame1 and week1b.htm in frame2.
    I've already tried several things, but I can't even make it work with one single url. So what should I do?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I did this for another post a couple of days ago, have a search or I mayl be back to morrow

    but quickly

    the select option value can be 'url1.htm^url2.htm'

    and then split by a=*optionvalue*.split('^')[0]; and b=*optionvalue*.split('^')[1];

    *optionvalue*= the syntax for the method you use

    the each url (a & b) can be the location of each frameset frame


    edit
    to answer this more fully, need to know if the select box will be in one of the frameset frames or a different location.

    hate answering frame posts so if anyone wants to pick this up, Please Do

  5. #5
    SitePoint Member
    Join Date
    Jan 2005
    Location
    NL
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    actually, the post you're referring to was also by me
    I'm trying to combine both codes, so I can use the dynamic selectbox to load two different urls into two different frames.
    the selectbox is on eg. index.htm which has two IFRAMES, the first called 'iframe1t' and the second 'iframe2'
    the user first selects the year in selectbox1, which then loads the values for that year into selectbox2. When the user selects lets say "week1" from selectbox1 it needs to load week1a.htm into iframe1 and week1b.htm into iframe2.
    I think I need to change the onChange value in this line:
    <select id="mcMPayRate" class="mcTxtBox" style="position:absolute;top:-2px;left:10px;width:105px;" size="1" onchange="javascript:this.size=1;">

    but I don't exactly know how, because when I change it to the leapto(url) function you provided me in the other post, it won't work.
    Also, when I change a value of this:
    var mcyear30Ary=new Array(
    ['Entry 1A','4.77'],
    ['Entry 1B','5.07'],
    ['Entry 1C','5.37'],
    ['Entry 1D','5.68'])
    into an url, my browsers (mozilla and IE) won't load that url.

  6. #6
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PHP Code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd"
    >

    <
    html>

    <
    head>
      <
    title></title>
    <
    style>
    .
    mcTxtBox font-Size:12pxwidth:100px; }
    .
    mcTxtBoxDis font-Size:12pxwidth:100px;background-Color:#66FFFF;border:0px; }
    </style>
    <
    script language="JavaScript" type="text/javascript">
    <!--

    // Customise
    // each field is a sub array
    // first field of the sub array is the text
    // second field of the sub array is the value which could be urls

    URLPath='http://';

    var 
    Year2003=new Array(
    [
    '03 Week 1','www.sitepoint.com^www.js-examples.com'],
    [
    '03 Week 2','www.ntlworld.com^www.freewebmasterhelp.com'],
    [
    '03 Week 3','www.freewebmasterhelp.com^www.webdeveloper.com'])

    var 
    Year2004=new Array(
    [
    '04 Week 1','www.vicsjavascripts.org/SearchForText/www.vicsjavascripts.org/SearchForText.htm^DogTag/DogTag.htm'],
    [
    '04 Week 2','www.freewebmasterhelp.com^www.sitepoint.com'],
    [
    '04 Week 3','www.google.com^www.ntlworld.com'])


    // No Need to Change


    function SelectYear(mc){
     if (!
    mc){ return; }
     
    mcUseAry=eval(mc);
     
    document.getElementById('WeekSelect').options[1]=new Option('for '+mc,'',true,true);
     for (
    mc0=0;mc0<mcUseAry.length;mc0++){
      
    document.getElementById('WeekSelect').options[mc0+2]=new Option(mcUseAry[mc0][0],mcUseAry[mc0][1],true,true);
     }
     
    document.getElementById('WeekSelect').size=mcUseAry.length+2;
     
    document.getElementById('WeekSelect').selectedIndex=0;
    }

    function 
    SelectWeek(mc){
     if (!
    mc){ return; }
     
    document.getElementById('iframe1').src=URLPath+mc.split('^')[0];
     if (
    mc.split('^')[1]){
      
    document.getElementById('iframe2').src=URLPath+mc.split('^')[1];
     }
    }
    //-->
    </script>

    </head>

    <body bgcolor="#CCFFFF" >

    <br>
    <center>
    <div id="mcMorgageCalculator" >
    <table width="420" cellpadding="0" cellspacing="0" border="1" bgcolor="#66FFFF" style="font-size:12px;" >
      <tr height="45" >
        <td align="center" >
         <select id="YearSelect" class="mcTxtBox" style="width:120px;" size="1" onchange="javascript:SelectYear(this.options[this.selectedIndex].value);" >
         <option value="">Select Year</option>
         <option value="Year2003">Year 2003</option>
         <option value="Year2004">Year 2004</option>
         </select>
        </td>
        <td >
         <div style="position:relative;left:0px;width:130px;background-Color:red;" >
          <select id="WeekSelect" class="mcTxtBox" style="position:absolute;top:-5px;left:10px;width:105px;" size="1" onchange="javascript:this.size=1;SelectWeek(this.options[this.selectedIndex].value);">
          <option value="">Select Week</option>
          </select>
         </div>
        </td>
      </tr>
    </table>





    <br>
    <br>
    <iframe name="iframe1" width="400" height="200" frameborder="0"></iframe>
    <br>
    <br>
    <iframe name="iframe2" width="400" height="200" frameborder="0"></iframe>

    <br>
    <br>


    </center>
    <br>

    </div>

    </body>

    </html> 

  7. #7
    SitePoint Member
    Join Date
    Jan 2005
    Location
    NL
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks a lot for your help
    it works now (had to add id-tags to the iframes to make it work in Firefox)


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
  •