SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PHP & JS Combined Dependant <Select>'s

    Hi all,

    I know there is another thread in here that is similar to this, but I didn't want to hi-jack that thread as my problem is slightly different.

    Problem
    I currently have a selection box who's content is extracted from a MySQL DB and is populated with the values returned from the MySQL query. Then, when a user selects an <option> within this selection box I want another selection box to be populated with values (again, extracted from MySQL) in accordance with the value selected from the first selection box. This obviously needs another call to the database, and so am wondering how I can do this while retaining the values contained in the first selection box.

    This is my PHP code...

    PHP Code:
    $query "SELECT category_id, parent_id, name, level FROM categories WHERE parent_id = 6";
                
    $query_res db_query($query);
                
    $num_rows db_num_rows($query_res);
                echo 
    "<b>Fine Art Materials...<b><br />";
                echo 
    "<select size='$num_rows' name='select1' id='select1' onChange='loadSelect2(this.value)'>";
                for( 
    $n 0$n $num_rows$n++) {
                    
    $rows db_fetch_array($query_res);
                    echo 
    "<option value='".$rows'category_id' ]."'>".$rows'name' ]."</option>";
                }
                echo 
    "</select>";
                echo 
    "<br />Number of rows returned: ".$num_rows."<br/></td>";
                echo 
    "<td>";
                echo 
    "<select size='10'>";
                echo 
    "<option value='0'>Database_Content_1</option>";
                echo 
    "<option value='1'>Database_Content_2</option>";
                echo 
    "</select>"
    The call to the Javascript function (from the onChange() in the first selection box) is currently empty, so am wondering what to put in it :s

    Cheers

    Tryst

  2. #2
    SitePoint Zealot abstraktmedia's Avatar
    Join Date
    Feb 2004
    Location
    Ljubljana
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is what I call "realtime" changing....no need to submit anything...

    Just copy paste....see the logic and then generate values with PHP...

    Hope this helps....Let me know....

    PHP Code:
    <html>
    <
    head>
           <
    title>Dependable select boxestitle>
    </
    head>
    <
    script type="text/javascript">
    function 
    setOptions(selectRef,optArray)
    {
      if(
    selectRef==null || optArray==null)
      {
      }
      else
      {
          var 
    optsRef selectRef.options;
          
    // Clear old options
          
    optsRef.length 0;
          
    // Insert new options
          
    for (var optArray.length-+= 2)
          {
              var 
    opt = new Option(optArray[i],optArray[i+1]); // text,value
              
    optsRef[optsRef.length] = opt;
          }
      }
    }


    var 
    Country_City = new Array();
    Country_City[1]=new Array("----","0","Melbourn""1266");
    Country_City[2]=new Array("----","0","Abersee""596","Berg im Drautal""591");
    Country_City[3]=new Array("----","0","Barbados""1412");
    Country_City[4]=new Array("----","0","Brüssel""1364");
    Country_City[5]=new Array("----","0","Albena""890","Elenite""885");
    Country_City[6]=new Array("----","0","Buenos Aires""515","Mesto Salvador""1003","Rio de Janero","22");
    Country_City[7]=new Array("----","0","island Sal""1303");
    Country_City[8]=new Array("----","0","Ayia Napa""849","Fly & Drive""852","Kalavassos/Tochni/Psematismeno","999");


    </script>
    <body>
    <form>
    Country: <select name="country_id" onchange="setOptions(this.form.elements['city_id'],Country_City[this.form.country_id.options[this.selectedIndex].value])">
    <option value=''>----</option>
    <option value='1'>Australia</option>
    <option value='2'>Austria</option>
    <option value='3'>Barbados</option>
    <option value='4'>Belgium</option>
    <option value='5'>Bolgary</option>
    <option value='6'>Brazil</option>
    <option value='7'>Cape Verde</option>
    <option value='8'>Ciprus</option>
    </select>
    <br>
    <br>

    City: <select name="city_id"></select>
    </form>
    </body>
    </html> 
    Last edited by abstraktmedia; Feb 23, 2004 at 04:18.
    exit(0);

  3. #3
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So i'll need to populate the JavaScript Arrays with values via PHP (values extracted from MySQL)?

    Cheers

    Tryst

  4. #4
    SitePoint Zealot abstraktmedia's Avatar
    Join Date
    Feb 2004
    Location
    Ljubljana
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    exactly....

    using the logic:

    CountryCity = new Array();
    CountryCity[country_id] = ("city","city_id","city","city_id","city","city_id" ....)


    You'll have to take care of the right "SELECTS" which are very important here and a nice loop to sort the data
    before generating JavaScript.

    I had the same problem during one big project but my problem were 3 dependable select boxes in "real time",
    meaning no submiting so all he data should be preloaded and displayed accordingly.

    It was one level deeper than the example I gave you.
    I had the Country-City-Hotel relation.

    What A nightmare....



    Keep me informed...

    If you'll need any help let me know.
    I may stil have the code from that one somewhere.....
    exit(0);

  5. #5
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers AbstraktMedia

    I was under the impression that I'd need to create a JavaScript array for each possible query combination from the first <SELECT>. I didn't think you'd need to get the "...id"'s ("city_id" in your example) from the returned query's.

    The approach I have done was to generate a table from the first set of query results, and then depending on what was clicked on, a new table would appear on the same page (next to the first table) containing values related to the selection from the first table. I set a GET variable so that the page knows what table to load up.

    It involves more page loads and requirse a bit of logic so that each state is recognised on each load.

    I know its a bit cumbersome, but it works ok.... at the moment anyway

    Any chance you can pass your code on so that i can analyse it? It's def worth knowing how that method is done.

    Cheers

    Tryst

  6. #6
    SitePoint Zealot abstraktmedia's Avatar
    Join Date
    Feb 2004
    Location
    Ljubljana
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeh...well the bad thing of the first approach is that all the values should be preloaded in JS array but you get the select's changing with no submititng....

    If you don't mind the submiting then the solution is much much more elegant ofcourse...

    In my case the customer wanted the "real-time" change....

    I'll post the code just give me some time cause I'm dealing with the deadline and I have to finish a big project and the code for that one is "somwhere out there" but I have to modify it so you can understand the logic.....
    exit(0);

  7. #7
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent, I look forward to it

    Cheers

    Tryst


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
  •