Member Avatar for Develop.eR

hello guys.. im new in creating websites.. my problem is how to auto update the dropdownlist then the combobox is change/click?

example:
i have 2 combobox which cbo1 contains the list of genre of songs like pop, opm, love songs etc. and cbo2 contains the list of artists/singers etc about a certain genre(cbo1).

i choose/select the love songs in cbo1..

now, i dunno how to auto update the items/list in cbo2 using php w/o refreshing the whole page everytime i change the cbo1...

How can I do it with jQuery/php?

  • 3 Contributors
  • 12 Replies
  • 2K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by diafol
Member Avatar for lps

Based on my knowledge, there are a few ways to do so.
1. get multiple cbo2 run using php and assign a class="hidden" to each of it. then using jquery, bind the cbo1 to a change action which will made the correspoding cbo2 display. Example:
html

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery.min.js"></script>
        <script>
            jQuery(document).ready(function(){
                jQuery('.cbo1').live('change',function(){
                    var id = jQuery(this).val();
                    jQuery('#'+id).show();
                    jQuery('#'+id).siblings('.cbo2').hide();
                });
            });
        </script>
    </head>
    <body>
        <select class="cbo1">
            <option value="pop">pop</option>
            <option value="opm">opm</option>
        </select>
        <select class="cbo2" id="pop" style="display:none;">
            <option>pop option 1</option>
            <option>pop option 2</option>
        </select>
        <select class="cbo2" id="opm" style="display:none;">
            <option>opm option 1</option>
            <option>opm option 2</option>
        </select>
    </body>
</html>

Another way is using ajax but I not quite pro with that.

Member Avatar for Develop.eR

so you mean that if i have a 10 genre of songs, then i should have 10 select tags?

Member Avatar for lps

that is the basic style. or by using ajax, you can have only one select tag and have ajax to load datas from your php files as ajax create temporaly access to your php file without reloading the page.

Member Avatar for Develop.eR

so you want me to use ajax in order to solve the problem..? thanks for the help :D i'll use the code you post above as one alternative solution to my problem.. it helps a lot.. need to explore ajax..

Member Avatar for diafol

It depends if your data is static or extrememly dynamic. If quite static - i.e. data in DB not updated very often, you can dump all the data as json into the page on load. You then just need to have a single select widget.

JS (jQuery or vanilla-flavoured) can then populate your select widget based on the selected data.

I'm not going to post the code for this unless you're interested though.

Your alternatives include a straight php js-initiated form post event (page 'reloaded') or an ajax call.

//Actually - you don't mention whether you're using a DB or simple arrays or external file to store the data. What are you doing?

Edited by diafol
Member Avatar for Develop.eR

ips: thanks for the link.. helps a lot understanding about ajax..

diafol: sorry if i forgot all the details.. im using database for the items inside the comboboxes, and what i want is everytime i change the combobox(cbo1), the combobox(cbo2) update(retrieves data from db according to cbo1 value) its item without reloading the page.

btw.. i have another problem.. should i post it here? or make a discussion?

--thanks for the help--

Member Avatar for diafol

OK, first of all if you have a problem directly related to this post (selects and ajax population), by all means post it here, otherwise, start a new thread.

The DB items are not a problem. What I'm asking is whether the data in the DB is changed/ added to etc on a regular basis? If not - if the DB data is not updated often, you can use the json solution I mentioned, which I'll post if you're interested. Otherwise, an ajax solution is what you're looking for.

Ajax solutions using vanilla javascript is very fiddly and verbose. Using a library like jQuery makes it extremely easy. Just a suggestion.

Member Avatar for Develop.eR

data in db don't have to change/update.. what i wanna change is the current items inside the combobox which is the option tag and will replace it by the data in the db..

Member Avatar for diafol

Ok. Can you give your table structure for the genres and the artists and which fields are common.

Member Avatar for Develop.eR 
tbl_genre            tbl_artist
+-----------+        +----------------+
|g_id|g_desc|        |a_id|a_name|g_id|
+-----------+        +----------------+
|  1 | Pop  |        | 1  |FloRida| 1 |
|  2 | Rock |        | 2  |RMC    | 2 |
+-----------+        +----------------+

the items inside the table is just a exmple..
Member Avatar for diafol

Ok, I refactored a prev example. But my table names are slightly different to yours.

g_id = genre_id
g_desc = genre_name
a_id = act_id
a_name = act_name

<?php
    $link = mysql_connect('localhost','root','');
    if (!$link) {
        die('Not connected : ' . mysql_error());
    }
    $db_selected = mysql_select_db('daniweb', $link);
    if (!$db_selected) {
        die ('Can\'t use database : ' . mysql_error());
    }

    //change LEFT to INNER if you only want genres with acts in them
    $r = mysql_query("SELECT g.genre_id, g.genre_name, a.act_id, a.act_name FROM genres AS g LEFT JOIN acts AS a ON g.genre_id = a.genre_id ORDER BY genre_name, act_name");
    if(mysql_num_rows($r)){
        $gid = -1;
        $genres = '';
        $acts = '';
        while($d = mysql_fetch_assoc($r)){
            if($d['genre_id'] != $gid){
                if($gid == -1){
                    $genres .= "<option value =\"{$d['genre_id']}\" selected=\"selected\">{$d['genre_name']}</option>";
                    $first = $d['genre_id']; 
                }else{
                    $genres .= "<option value =\"{$d['genre_id']}\">{$d['genre_name']}</option>";
                }
            }
            if($first == $d['genre_id']){
                $acts .= ($acts == "") ? "<option value =\"{$d['act_id']}\" selected=\"selected\">{$d['act_name']}</option>" : "<option value =\"{$d['act_id']}\">{$d['act_name']}</option>";
            }
            $json_pre[$d['genre_id']][$d['act_id']] = $d['act_name']; 

            $gid = $d['genre_id'];

        }
        $json = json_encode($json_pre);
    }

?>
<!DOCTYPE HTML>
<html lang="en">
<head>
<!-- Force latest IE rendering engine or ChromeFrame if installed -->
<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta charset="utf-8">
<title>$page_title</title>

</head>
<body>

<select id="cbo1">
    <?php echo $genres;?>
</select> 
<select id="cbo2">
    <?php echo $acts;?>
</select> 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
    var json = <?php echo $json;?>;
    var genre = <?php echo $first;?>;
    $('#cbo1').change(function(){
        genre = $(this).val();
        var content = '';
        $.each(json[genre], function(index, value) { 
            content += '<option value="' + index + '">' + value + '</option>'; 
        });
        $('#cbo2').html(content);
    });
</script>

</body>
</html>

OK, it uses jQuery. My js isn't great - so you it may need a look at by an expert. Also the php seems a little convoluted - perhaps that could be tidied too.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.