show a dynamic select input from mysql table - php

Question

I have used a select box to identify the users age group. Accroding to the value of the age group, I need to display diffrent options
For eg.
<select name="age_group">
<option value="1">15-25</option>
<option value="2">26-35</option>
<option value="3">35-60</option>
<option value="4">60 or above</option>
</select>
If the user selects the first option I need to display contents of 'tbl_hobbies' (mysql table) with age group 1 in another select box.
<select name="hobbies" id="hobbies">
<option>watching movies</option>
<option>playing computer games</option>
<option>chatting</option>
</select>
For the second option (26-35), I need to display 'tbl_hobbies' contents with age group 2
<select name="hobbies" id="hobbies">
<option>Cleaning Home</option>
<option>Reading</option>
<option>Travelling</option>
</select>
How can I achieve this using AJAX or is this possible without using AJAX?

Answer 1

First, add an id to age group
<select name="age_group" id="age_group">
Then
$( document ).ready(function() {
$('#age_group').change(function(){
$.ajax({
type: "POST",
url: "ajax.php",
data: { group_id: $(this).val() },
dataType: "html"
})
.done(function( msg ) {
$('#hobbies').html(msg);
});
});
});
In ajax.php you get all hobbies where group_id = $_POST['group_id']
$sql = "SELECT name FROM tbl_hobbies WHERE group_id = ".$_POST['group_id'];
// Execute your query and put the result in a variable (example $result_query)
// Then loop it
foreach($result_query as $row) {
echo '<option>'.$row['name'].'</option>';
}
NB : The loop may change according to your method to retrieve data

Answer 2

You can simply put all option together and hide option as per user choice
<select name="hobbies" id="hobbies">
<option class="group_1">Cleaning Home</option>
<option class="group_1">Reading</option>
<option class="group_1">Travelling</option>
<option class="group_2">watching movies</option>
<option class="group_2">playing computer games</option>
<option class="group_2">chatting</option>

Answer 3

you can use like this
<select id="age_select" name="age_group">
<option value="1">15-25</option>
<option value="2">26-35</option>
<option value="3">35-60</option>
<option value="4">60 or above</option>
</select>
<select name="hobbies1" id="hobbies1">
<option>watching movies</option>
<option>playing computer games</option>
<option>chatting</option>
</select>
<select name="hobbies2" id="hobbies2">
<option>Cleaning Home</option>
<option>Reading</option>
<option>Travelling</option>
</select>
and your jquery script look like this
<script>
$('#age_select').on('change'.function(){
var value = $(this).val();
if ( value == '1' ) {
$('#hobbies1').show();
$('#hobbies2').hide();
} else if ( value == '2' ) {
$('#hobbies2').show();
$('#hobbies1').hide();
}
});
</script>
and if you want to pass through ajax
$('#age_select').on('change'.function(){
var value = $(this).val();
var data = 'age='+value;
$.post(
'abc.php',
data
).success(function(resp){
});
});

Answer 4

What you want is called "Dynamic dependent dropdowns". You can view a very good demo here.
Algorithm
1. Get all the options from database // do that using php
2. Assign classes to them according to group // do that using php
3. Put all of them in HTML // do that using php
4. Show/hide on event // do that using jQuery/javascript
Example
<select id="age_select" name="age_group">
<option value="1">15-25</option>
<option value="2">26-35</option>
<option value="3">35-60</option>
<option value="4">60 or above</option>
</select>
<select name="hobbies1" id="hobbies1">
<option value="wm" class="grp age-grp-1">watching movies</option>
<option value="pcg" class="grp age-grp-1>playing computer games</option>
<option value="chat" class="grp age-grp-2>chatting</option>
<option value="ch" class="grp age-grp-2>Cleaning Home</option>
<option value="rea" class="grp age-grp-3>Reading</option>
<option value="tr" class="grp age-grp-4>Travelling</option>
</select>
<script type="text/javascript">
// script to execute when you change option from first dropdown
$('#age_select').on('change'.function(){
var ageGrp = $(this).val();
// first, hide all options
$('.grp').hide();
// show options only for selected group
$('.age-grp-'+ageGrp).show();
});
</script>
Hope this helps!!!