dynamic drop down box from mysql

Question

I got 3 input fields and each field are getting their data from its own tables called Tour type, country and destination respectively as shown

    <label>Tour Type</label>
    <select id="element_11" name="element_11" required> 
    <option value="" selected="selected">--Select--</option>
    <?php
        while($row=mysql_fetch_array($sql))
        {
          $tour_type_id=$row['tour_type_id'];
          $name=$row['tour_name'];
          echo "<option value='$tour_type_id'>$name</option>";
        }
        ?>
    </select>



    <label>Country</label>
    <select id="element_12" name="element_12" required>
    <option value="" selected="selected">-- Select --</option> 
    <?php 
    $sql=mysql_query("Select countries_id,countries_name from countries");
        while($row=mysql_fetch_array($sql))
        {
          $cid=$row['countries_id'];
          $name=$row['countries_name'];

          echo "<option value='$cid'>".$name."</option>";
        }
        ?>
        </select>


    <label>Destination</label>
    <select id="element_13" name="element_13" required> 
        <option value="" selected="selected">-- Select --</option>
    <?php 
    $sql=mysql_query("Select destination_id,destination_name from destination");


        while($row=mysql_fetch_array($sql))
        {
          $destination_id=$row['destination_id'];
          $name=$row['destination_name'];

          echo "<option value='$destination_id'>".$name."</option>";
        }
        ?>

    </select>
    </div> 
    </li>

This is what i got as my 3 database tables i.e. tourtype, countries and destination respectively:

enter image description here

I am trying to make each field dependent on each other more like a dependent drop down box. For example if i select a tour type then the 2nd drop down should populate options only relevant to what is selected from the 1st drop down and so on. In this case for e.g if i select culture ,then the 2nd drop down should only show amsterdam and belgium.

Can anyone help me on this.

Refer http://stackoverflow.com/questions/12449547/jquery-dropdown-dependent — Kiren S, Jun 05 '13 at 09:54
1) If there is not much data and the amount of users is low, you can select all data, build all the select fields as required and show/hide them as needed. Not recommended tho! 2) AJAX: Select only specific data with ajax and rebuild select element according to data received. For fastest and development time I recommend you to use jQuery for ajax queries and DOM manipulation. — Tauri28, Jun 05 '13 at 09:57
Sorry i have never used ajax before and do not know how to put it together — munue, Jun 05 '13 at 10:00

M Khalid Junaid · Accepted Answer · 2013-06-05T10:27:55.667

1

Please go through this link dependent dropdown using jquery ajax

How he maintained the relations among the entities

let me explain you if you want countries based on tour then you need to relate the country table with tour table as you have shown the country table in image it contains only two columns countries_id and countries_name you have to add one more column that is tour_type_id when you select any tour you will get the tour_type_id then your query should be

SELECT * FROM `countries`  where `tour_type_id` = 1 //this is the id you will get from the tour_type select box

and this will populate the related countries same case for the destination related this table with country_id

Hope it makes sense

edited Jun 05 '13 at 10:27

answered Jun 05 '13 at 09:53

M Khalid Junaid

63,861
10
90
118

This looks like a good tutorial. Something i am trying to achieve in the same way. I will have a look at this thanks – munue Jun 05 '13 at 10:02
I just realized that all his data is on 1 table. But I have got 3 separate tables. I need all 3 tables to by dependent on each other. – munue Jun 05 '13 at 10:09
Sorry, but i think i am still confused by this – munue Jun 05 '13 at 11:02
Please refer to this updated question http://stackoverflow.com/questions/16938885/create-dynamic-drop-down-box/16939100?noredirect=1#16939100. I think this simplifies on what I am trying to explain. – munue Jun 05 '13 at 11:55

score 0 · Answer 2 · edited Feb 01 '16 at 22:28

0

There are two ways to sole this.. you can use use php with a page refresh and 2nd way use jQuery ajax to populate fields accordingly.

edited Feb 01 '16 at 22:28

marc_s

732,580
175
1,330
1,459

answered Jun 05 '13 at 09:52

Muhammad Saqlain Arif

544
1
5
16

score 0 · Answer 3 · answered Jun 05 '13 at 09:58

as i am an asp.net developer i can suggest you put your 2nd and 3rd drop down in an update panel(ajax update panels) then in your 2nd drop down query make it like $sql=mysql_query("Select countries_id,countries_name from countries where tour_type_id="+element_11.SelectedItem.Value+""); it will select those values whose tour_type_id is same as you selected in first drop down, same logic can be use in 3rd drop down as well

dynamic drop down box from mysql

3 Answers3

Linked