Issue with JS and dynamic select form fields -

Issue with JS and dynamic select form fields -

Currently I have a select form field (which I will refer to as state)
which needs to dynamically populate another select form field (which I
will refer to as school). The use case is that the user selects their
state, and based on that state chosen, they are presented with selects for
a school that populate that state.
The states are read from a flat file (data.php) and stored in $state_arr,
and the schools are read from the same flat file, stored in $stateSchool.
To complicate the matter, the select fields are heavily stylized.
The following code populates the state select based on the flat file:
<div id="stateField" class="selectStyled">
<select class="singleField styled" name="kp_state"
id="kp_state">
<option value="default">STATE</option>
<?
foreach ( $state_arr as $state_abv )
{
echo '<option value="' . $state_abv .
'">' . $state_abv . '</option>';
}
?>
</select>
</div><!-- //selectStyled -->
This part works fine… and appropriately populates the state field. The
issue is that when the user selects their state, it's not changing the
school select form. The code I'm using for the school select form is as
follows:
<div id="schoolField" class="selectStyled">
<select class="longField styled" name="kp_school1"
id="kp_school1">
<option value="default">CURRENT SCHOOL</option>
</select>
</div><!-- //selectStyled -->
The JS that I'm using to try to get the above schoolField to populate is
as follows:
<script>
var kp_dropdownOpts = {}
$(function(){
<?php
foreach ($state_arr as $sa)
{
if ( isset($stateSchool[$sa]) )
{
foreach ($stateSchool[$sa] as $value)
{
?>
window.kp_dropdownOpts.<?php echo $sa; ?> += '<option
value="<?php echo $value; ?>"</option>';
<?php
}
}
}
?>
$('#kp_state').change(function(){
var state = $(this).val();
var len = 0;
for (var o in window.kp_dropdownOpts[state]) {
len++;
}
if(len > 0){
var newDrop = window.kp_dropdownOpts[state];
$('#kp_school1').html(newDrop.replace('undefined', ''));
}
else {
$('#kp_school1').html('<option value="default">No Schools
Listed For Your Area</option>');
}
});
});
</script>
In addition, I have the following code which styles the drop downs:
// Iterate over each select element
function custom_select()
{
if($('select').length)
{
$('select').not('.s-hidden').each(function() {
// Cache the number of options
var $this = $(this),
numberOfOptions = $(this).children('option').length;
// Hides the select element
$this.addClass('s-hidden');
// Wrap the select element in a div
$this.wrap('<div class="select"></div>');
// Insert a styled div to sit over the top of the hidden
select element
$this.after('<div class="styledSelect"></div>');
// Cache the styled div
var $styledSelect = $this.next('div.styledSelect');
// Show the first select option in the styled div
$styledSelect.text($this.children('option').eq(0).text());
// Insert an unordered list after the styled div and also
cache the list
var $list = $('<ul />', {
'class': 'options'
}).insertAfter($styledSelect);
// Insert a list item into the unordered list for each select
option
for (var i = 0; i < numberOfOptions; i++) {
$('<li />', {
text: $this.children('option').eq(i).text(),
rel: $this.children('option').eq(i).val()
}).appendTo($list);
}
// Cache the list items
var $listItems = $list.children('li');
// Show the unordered list when the styled div is clicked
(also hides it if the div is clicked again)
$styledSelect.click(function(e) {
e.stopPropagation();
$('div.styledSelect.active').each(function() {
$(this).removeClass('active').next('ul.options').hide();
});
$(this).toggleClass('active').next('ul.options').toggle(0,
function(){
$('ul.options').jScrollPane();
});
});
// Hides the unordered list when a list item is clicked and
updates the styled div to show the selected list item
// Updates the select element to have the value of the
equivalent option
$listItems.click(function(e) {
e.stopPropagation();
$styledSelect.text($(this).text()).removeClass('active');
$this.val($(this).attr('rel'));
$list.hide();
/* alert($this.val()); Uncomment this for demonstration! */
});
// Hides the unordered list when clicking outside of it
$(document).click(function() {
$styledSelect.removeClass('active');
$list.hide();
});
});
}
}
I recognize this is fairly complicated. At least for me it is... It's the
styling of the drop downs, which is throwing this off (I think). I have
tried to be as thorough as I can here so as to give you a better idea of
what the issue is and the problem I can't seem to conquer. The current
codebase is here:
http://www.summerserver.com/elance/1
Currently there are only school data for the states of IL and NE, so
choosing any other state should bring up the "No Schools Listed For Your
Area" selection.
I can't thank you all enough for helping me with this problem. I have
literally been trying to figure this out for the last 5 days, with no
luck. I've scoured the internet, and I'm truly at a loss... If there is
any information I've left out, please let me know and I'm more than happy
to provide it. Thank you again.