auto populate
Moderator: General Moderators
auto populate
any one know how to populate the multiple select boxes? using php and mysql..
- Frozenlight777
- Forum Commoner
- Posts: 75
- Joined: Wed May 28, 2008 12:59 pm
Re: auto populate
Reading this post should answer your question.
viewtopic.php?f=1&t=83646
viewtopic.php?f=1&t=83646
Re: auto populate
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? 
- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Re: auto populate
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.
And no one is going to give you code. We are hear to help, not do your work for you.
Re: auto populate
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):
HTML from example:
Javascript from example:
Code and example can be seen here: http://www.skudra.eu/kasis/sandbox/auto_populate/
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, '\')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/"/g, '"')
.replace(/(\r|\n)/g, '');
}
function sanitizeHtmlValue (str) {
var s = str.toString();
return s.replace(/\\/g, '\')
.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);
}
})
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>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"]'));
});- RobertGonzalez
- Site Administrator
- Posts: 14293
- Joined: Tue Sep 09, 2003 6:04 pm
- Location: Fremont, CA, USA
Re: auto populate
Cool contribution. Thanks for that.