[jQuery] Dynamic select menus widgit
I have a script that selects rows from a database with a select menu
for each field. Some php runs prior to page load to populate the
options. When the user clicks on an option, jquery asks a script to
have the remaining select menus have their options re-populated based
on distinct values for the rows that match the selected option(s).
The submit button is overwritten with jquery to ask a php script to
return a table for the rows that match all of the selected fields.
In order to prevent the select menu with a selected option from being
repopulated (thus losing the selection) a class named "picked" is
added to the select menu in the .change function that also sends the
AJAX request to repopulate the others.
Would it be faster to simply have the rows loaded into a javascript
array or to use AJAX calls to PHP? Here's the current code, which
works quite well for my current needs:
$(document).ready(function() {
$('#example').accordion();
$(':reset').bind('click',resetFunction);
function resetFunction(){
$('select').each(function(){
$(this).removeClass('picked');
});
}
$('select').change(function(){
$(this).addClass('picked');
var str = $('#form').serialize();
$.getJSON('pform.php',str,proc);
function proc(data){
//code to remove options and add new group of limited options
});
$('form').submit(function(evt){
var stri=$('#form').serialize();
$.get('psub.php',stri,ctab);
function ctab(ntable){
$('#tabContain').html(ntable);
}return false;
});
});