#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    9
    Rep Power
    0

    Two Select Box Dynamic Dropdown - Seriously how hard can this be?


    Hello and thanks for your help in advance.
    Ive coded before in PHP but never really done any javascript.
    I struggle with object orientated coding and my php is probably like a childs handwriting but I get by!! Thanks for you help because after 5 hours of searching Ive found myself in a position where I need help!

    Ive looked online at many dynamic dropdown examples. I want to use Javascript because I at least know what it is, unlike JSON (?) or ajax (!!???). So here I go

    I want two select boxes. second to populate based on the selection of the first one. Now heres where I get annoyed and very angry!!! GRRRRR

    I dont want my select box options to look like this <option>Africa</option> or even <option value="africa">africa</option> because when processing the form they will be of no use to me. Im pulling data from mysql and my data (each data object) has a primary key. So I need the first select to have this as a value i.e. <<option value="1">africa</option> and the second select to populate based on this id number so....... in my own worst example of coding ever......

    if select = "1" then options should be 45=tiger, 46=baboon, 56=lion, 104=elepant (<option value="104>elephant</option> as it would look in code)

    Then when at least the form is submitted I can process that select box 1 is id number 1 and select box 2 is id number 104

    but DAMN - how had can this be? Pages of ajax? Funky JS code? JSON? If I searched the web in 2004 Id have found loads of javascript help pages top assist me with this. If you cant answer my question then at least tell me WHY IS THIS SO DIFFICULT TO DO? Im baffled, frustrated and ready to poor beer all over my computer in disgust.


    Please help! Please! Im begging now (and no I dont want to pay 34 pounds / dollars to ask a coding expert) and yes - i must be stupid
  2. #2
  3. No Profile Picture
    Lost in code
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2004
    Posts
    8,316
    Rep Power
    7171
    How big is your total data set? That's really what determines whether or not you need to use AJAX. If your data set is thousands of records large, then you'll have unbearably bad performance if you don't use AJAX. If your data set is only a few hundred records large then you can do it in a different way without using AJAX.
    PHP FAQ

    Originally Posted by Spad
    Ah USB, the only rectangular connector where you have to make 3 attempts before you get it the right way around
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    9
    Rep Power
    0
    Originally Posted by E-Oreo
    How big is your total data set? That's really what determines whether or not you need to use AJAX. If your data set is thousands of records large, then you'll have unbearably bad performance if you don't use AJAX. If your data set is only a few hundred records large then you can do it in a different way without using AJAX.
    thanks for your reply.

    Dataset for select 1 is 21 - potentially going to be 25 ie.
    1 - object
    2 - object
    3 - object

    select 2 (dataset 2?) is 400 but maybe only 50 for 1, 4 for 2, 80 for 3 - this could grow to 1000 in total across all 20 odd options.

    Im I being clear enough? I see what your saying about performance but we are no longer running P166MMX PC's as we did in yesteryear - is performance with all its multi cores really an issue?

    Anyway - thanks for your help, possibibly I would need an iphone safari browser to be able to handle it because as we all know mobile devices are now very popular. Andoid and iphone, IE and firefox.

    Thanks again. Beer on me if your ever around the Northwest of England
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    Just to add to what E-Oreo was saying..., what your looking for is called a "chained select menu". You can have it set-up to display static options or you can use AJAX to display dynamic options. And... from your last post; I believe you might want to look into a "ajax chained select menu". Because it looks like your options could be dynamic and fluctuate in number; based on unknown variables.
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    9
    Rep Power
    0
    Hi and tbanks for your help so far. Once an item is entered into the database its primary key or id number will not change. I wwill be adding items and deleting items that's all. Its just that I wont be adding them in any particular order. Im typing on android phone so very. Sorry for bad spellings
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    9
    Rep Power
    0
    Ok I've reserved a full day tomorrow to try and resolve this. Can you guys point me in the direction of a website or web page with the JavaScript I need and I'll take my chances with the performance issues? The important thing is that I will be able to put the primary key in the select box value and pull out that number for select one and select two. Thanks
  12. #7
  13. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,187
    Rep Power
    184
    This looks like a pretty good jQuery one:jQuery Chained Select Menu. Beyond that... just do an online search for "chained select menu examples/tutorials" and/or "ajax chained select menu examples/tutorials". You should be able to find several useful examples (with source code); that will teach you how to do this.
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    9
    Rep Power
    0
    Brill, Had a quick look at that and it seems quite easy to follow.

    I think the problem I was having was the frustration of always finding myself landing on a particular website when suffing google as one particular site seems to dominate the search results but, I presume, is more tailored for people like yourselfs (people who understand ajax/json/jquery) rather than people like myself (still coding in PHP 4)

    I think its possible at last I may be able to do this multiple select so Im going to crack on and see what happens.

    Thanks a lot! This is certainly a simple guide to follow.
  16. #9
  17. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    9
    Rep Power
    0
    web_loone08 you pointed me in the right direction and the script you pointed me too works a treat so Id like to thank you very much !

    I have one final question or problem Im hoping you can help me with. If the first option is OTHER then the second option is OTHER - which works fine. But if the first option is a selected item then I need OTHER to be an option in every group of the second selected items. Again please tell tell me if I am not being clear. based on the car example tutorial you pointed me to, the first option is manufacturer and the second option is the model So if the model isnt listed I need OTHER as the first of the second options.

    Also, just to myther you guys even more (crimes, seriously, Im willing to paypal some beer money to you for this) I want text fields to appear if other is selected - now the last time I did anything like that I used layers - back in the day of IE6. Now Ive not looked online for solutions to this but Im happy too dig and do the hard work myself if you can suggest or point me in the right direction.

    You guys that spend time on the forums helping people like myself really are very good people. Sharing knowledge for potentially nothing in return is something you deserve a pat on the back for.

    Here is my script - a bit messy I know

    Code:
     <select id="manu" name="manu">
    <option value="other">- OTHER -</option>
    <?php
    $query = "SELECT id, name FROM manufacturer";
    $result = mysql_query($query) or die ("mysql error: " . mysql_error());
    while ($data = mysql_fetch_array($result)) {?>
     <option value="<?php echo $data[0]; ?>"><?php echo $data[1]; ?></option>
     <?php } ?></select>
     
    <select name="model" id="model">
     <option value="other" class="other">- OTHER -</option>
     <?php
    $query2 = "SELECT id, manu, name FROM cars";
    $result2 = mysql_query($query2) or die ("mysql error: " . mysql_error());
    while ($data2 = mysql_fetch_array($result2)) {
    $query3 = "SELECT id, name FROM manufacturer WHERE id = '".$data2[1]."'";
    $result3 = mysql_query($query3) or die ("mysql error: " . mysql_error());
    $data3 = mysql_fetch_array($result3);
    ?>
    <option value="<?php echo $data2[0]; ?>" class="<?php echo $data3[0]; ?>"><?php echo $data2[2]; ?></option>
    <?php } ?></select>
     <script src="scripts/jquery.chained.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
     $(function(){$("#model").chained("#manu"); });
    </script>
  18. #10
  19. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    9
    Rep Power
    0
    Ok I sussed it )

    Messy as ever, but it works - so in an effort to give back to the forum here is how I cracked it.

    Code:
    Select model or type in Other if not listed<br></p>
     		 		 <select name="model" id="model">
     		 		 <option value="other" class="other">- OTHER -</option>
    
     		 		 <?php $query4 = "SELECT id, name FROM manufacturer";
    				 $result4 = mysql_query($query4) or die ("mysql error: " . mysql_error());
    				 while ($data4 = mysql_fetch_array($result4)) {?>
    				 <option value="other<?php echo $data4[0]; ?>" class="<?php echo $data4[0]; ?>">- OTHER -</option>
    				 <?php }?>
    
    
    
     		 		 <?php
     		 		 		$query2 = "SELECT id, manu, .......etc etc
    Now just the challenge of the text box appearing when other is selected.....
  20. #11
  21. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    9
    Rep Power
    0
    Mythering again! I cant seem to get a jquery checkbox hide to work. Again more searching is just showing up different solutions all of which seem to be different / over complicated /using css (which I dont want to use)

    Some are hiding the textbox to start with. From what I can guess.

    So.... any simple solutions to this? Thanks again
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    9
    Rep Power
    0
    Guys I got it all sorted in the end, its took a good few hours but thanks a lot for your help and introduction into JQuery.

    Thanks

IMN logo majestic logo threadwatch logo seochat tools logo