auto populate
Posted: Wed Jun 04, 2008 9:36 pm
any one know how to populate the multiple select boxes? using php and mysql..
A community of PHP developers offering assistance, advice, discussion, and friendship.
http://forums.devnetwork.net/
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"]'));
});