auto populate

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
<?erick?>
Forum Newbie
Posts: 12
Joined: Thu May 29, 2008 8:36 am

auto populate

Post by <?erick?> »

any one know how to populate the multiple select boxes? using php and mysql..
User avatar
Frozenlight777
Forum Commoner
Posts: 75
Joined: Wed May 28, 2008 12:59 pm

Re: auto populate

Post by Frozenlight777 »

Reading this post should answer your question.
viewtopic.php?f=1&t=83646
<?erick?>
Forum Newbie
Posts: 12
Joined: Thu May 29, 2008 8:36 am

Re: auto populate

Post by <?erick?> »

thank you for the link. but i need a mutiple select boxes and mutiple table. and if the user's click the first box it is automatic populate in the second box from defferent table. just like jquery but i dont how to use jquery or ajax. i need php code anyone wants to shared your code? :oops:
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: auto populate

Post by RobertGonzalez »

This is not a PHP issue, this is a pure javascript issue. Search for "populating a select box from a selected option" or something along those lines.

And no one is going to give you code. We are hear to help, not do your work for you. ;)
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: auto populate

Post by kaszu »

Since I had nothing better to do I wrote a small jQuery plugin, but instead of "table" it uses object as data source.
jQuery plugin (autoPopulate probably is bad name, but couldn't think of anything else):

Code: Select all

function sanitizeHtmlAttribute (str) {
    var s = str.toString();
    return s.replace(/\\/g, '&#92;')
              .replace(/>/g, '>')
              .replace(/</g, '<')
              .replace(/"/g, '"')
              .replace(/(\r|\n)/g, '');
}
function sanitizeHtmlValue (str) {
    var s = str.toString();
    return s.replace(/\\/g, '&#92;')
              .replace(/>/g, '>')
              .replace(/</g, '<')
              .replace(/(\r|\n)/g, '');
}
 
$.fn.extend({
    autoPopulate: function (data, element)
    {
        var _target = this;         //Element which options will be changed
        
        var _source = $(element);   //Element on which value change given element
                                    //will be populated with new options 
        var _data = data;
        
        var onchange = function () {
            var value = $(this).val();
            var _html = '';
            
            if (_data[value] !== undefined)
            {
                for(var item in _data[value])
                {
                    if (_data[value].hasOwnProperty(item))
                    {
                        _html += '<option value="' + sanitizeHtmlAttribute(item) + '">' + sanitizeHtmlValue(_data[value][item]) + '</option>';
                    }
                }
 
                _target.html(_html);
                _target.change();
                
                if (_html == '')
                {
                    _target[0].disabled = true;
                }
                else
                {
                    _target[0].disabled = false;
                }
            }
            else
            {
                _target.html('');
                _target.change();
                _target[0].disabled = true;
            }
        }
        
        _source.change(onchange);
        onchange.call(_source);
    }
})
 
HTML from example:

Code: Select all

<select name="select1">
    <option value="0">Value 0</option>
    <option value="1">Value 1</option>
    <option value="2">Value 2</option>
    <option value="3">Value 3</option> 
</select>
<select name="select2"></select>
<select name="select3"></select>
Javascript from example:

Code: Select all

/*
var data = {
    [PARENT_SELECT_VALUE: {[CHILD_SELECT_VALUE: CHILD_SELET_TEXT,]*},]*
};
*/
 
var data = {
    //If first option selected populate with this data
    0: {'a': 'Choice A', 'b': 'Choice B', 'c': 'Choice C', 'd': 'Choice D'},
    //If second option selected populate with this data
    1: {'e': 'Choice E', 'f': 'Choice F', 'g': 'Choice G', 'h': 'Choice H'},    
    //...
    2: {'i': 'Choice I', 'j': 'Choice J', 'k': 'Choice K'} 
};
 
var data2 = {
    'a': {0: 'A-1', 1: 'A-2', 2: 'A-3', 3: 'A-4', 4: 'A-5'},
    'b': {5: 'B-1', 6: 'B-2', 7: 'B-3'},
    'c': {8: 'C-1', 9: 'C-2', 10: 'C-3', 11: 'C-4'},
    'd': {12: 'D-1', 13: 'D-2', 14: 'D-3', 15: 'D-4', 16: 'D-5'},
    'e': {17: 'E-1'},
    'f': {18: 'F-1', 19: 'F-2'},
    'g': {20: 'G-1'},
    'h': {21: 'H-1', 22: 'H-2'},
    'i': {23: 'I-1', 24: 'I-2', 25: 'I-3', 26: 'I-4'},
    'j': {27: 'J-1', 28: 'J-2', 29: 'J-3'},
    'k': {30: 'K-1', 31: 'K-2'}
};
 
$(document).ready(function () {
    
    //select2 is the name of the element which will be populated
    //select1 is the name of the element which value will determine options for select2
    $('select[name="select2"]').autoPopulate(data, $('select[name="select1"]'));
    
    //select3 is the name of the element which will be populated
    //select2 is the name of the element which value will determine options for select2
    $('select[name="select3"]').autoPopulate(data2, $('select[name="select2"]'));
 
});
Code and example can be seen here: http://www.skudra.eu/kasis/sandbox/auto_populate/
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: auto populate

Post by RobertGonzalez »

Cool contribution. Thanks for that.
Post Reply